angular 4 material使用ngFor和ngModel显示formArrayName-Java 学习之路

我试图用Angular 4反应形式显示一组电子邮件，并从我的输入绑定一个数组，所以在组件中我写了这个：

<li>
 <h4>Telephone</h4>
 <div class="lists" formArrayName="telephones">
  <mat-form-field *ngFor="let telephone of userData.telephones; let i = index">
   <input matInput [(ngModel)]="telephone">
  </mat-form-field>
 </div>
</li>

我需要显示一个电话号码阵列，我想用ngModel使其字段可编辑 .

我尝试了很多东西：formArrayName解决方案[formGroupName] =“index”和formControlName =“”，但它没有用 . 也是一个带有ngFor解决方案的ngModel，需要一个唯一的名称 .

1 回答

不要将反应形式与模板驱动混合 . 选择其中一个由于您正在使用数组，因此请使用反应形式 . 看起来您的数组是原始类型，这意味着您可以直接分配值而无需循环数组 .

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    telephones: this.fb.array(this.userData.telephones)
  });
  // if receiving data at a later point, use below instead
  //this.myForm.setControl('telephones', this.fb.array(this.userData.telephones))
}

然后在你的模板中迭代你的表单数组（这里没有有角度的材料）：

<div formArrayName="telephones">
  <div *ngFor="let tel of myForm.controls.telephones.controls; let i = index">
    <input [formControlName]="i" />
  </div>
</div>

StackBlitz

回复于 2024-04-23T22:28:10+08:00

angular 4 material使用ngFor和ngModel显示formArrayName

1 回答

相关问题