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编辑其字段。

我尝试了很多东西：一个formArrayName解决方案[formGroupName] =＆＃34; index＆＃34;和formControlName =＆＃34;＆＃34;，但它没有用。也是一个带有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))
}

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

<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

1 个答案: