angular 4 material 使用 ngFor 和 ngModel 显示 formArrayName

Question

我正在尝试用 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 进行编辑。

我已经尝试了很多东西：一个带有 [formGroupName]="index" 和 formControlName="" 的 formArrayName 解决方案，但它没有用。还有一个带有 ngFor 解决方案的 ngModel 需要一个唯一的名称。

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

然后在你的模板中迭代你的表单数组（这里没有 angular material）：

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

StackBlitz

angular 4 material 使用 ngFor 和 ngModel 显示 formArrayName

angular 4 material show formArrayName with ngFor and ngModel

ngfor

ngmodel

angular

angular4-forms

formarray