用ngFor和ngModel显示angular 4材料的formArrayName

Question

<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>

Answer 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>

斯塔克布利茨