如何以角度 4 反应形式创建动态数组并将每个字段与输入（formControlName）绑定？答案

【问题标题】：How to create dynamic array in angular 4 reactive form and bind each field with input (formControlName)?如何以角度 4 反应形式创建动态数组并将每个字段与输入（formControlName）绑定？
【发布时间】：2018-10-08 04:37:09
【问题描述】：

我正在使用 Angular 4 并面临一个问题，我在表单中创建了一个数组，并将每个组与输入字段绑定，但是当我填写第一个字段时，它会自动填充浏览器中的第二个字段，但在表单中只有一个字段的值可用。

dynamicArray.ts

addNewArrayForm : FormGroup;

constructor(private formBuilder : FormBuilder){}

ngOnInit() {
   this.addNewArrayForm = this.formBuilder.group({
      testArray : this.formBuilder.array([])
   });

   let arrayValue = [1, 2, 3, 4, 5];
   let testArrayField = <FormArray>this.addNewArrayForm.controls['testArray'];
   for(let value of arrayValue){
      testArrayField.push(new FormControl(null));
   }

   checkValue(){
      console.log(this.addNewArrayForm.value);
      //Output 
      {
         testArray : ['1','12',null,null,null]
      }
   }
}

dynamicArray.html

<form [formGroup] = "addNewArrayForm">
   <div class="card" formArrayName="testArray" *ngIf="addNewArrayForm.controls['testArray'].value && (addNewArrayForm.controls['testArray'].value).length > 0">
      <div *ngFor="let value of addNewArrayForm.controls['testArray'].value; let x = index ">
         <input type="text" formControlName="{{x}}">
      </div>
      <div>
         <button type="button" class="btn" (click)="checkValue()">Click</button>
      </div>
   </div>
</form>

您可以在此链接上查看我的问题：https://angular-pdx2q2.stackblitz.io

谢谢。

【问题讨论】：

标签： angular angular-forms angular4-forms angular-formbuilder

【解决方案1】：

只需在 ngFor 指令上使用 trackBy 选项即可避免混乱：

模板

*ngFor="let value of addNewArrayForm.controls['testArray'].value; ...; trackBy: trackByFn"

组件

trackByFn(index: number) {
  return index;
}

分叉Stackblitz Example

【讨论】：