如何在 angular 4 反应形式中创建动态数组并将每个字段与输入 (formControlName) 绑定？

Question

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

你可以查看我的问题link：https://angular-pdx2q2.stackblitz.io

谢谢。

Answer 1

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

模板

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

分量

trackByFn(index: number) {
  return index;
}

分叉 Stackblitz Example

如何在 angular 4 反应形式中创建动态数组并将每个字段与输入 (formControlName) 绑定？

How to create dynamic array in angular 4 reactive form and bind each field with input (formControlName)?

angular

angular4-forms

angular-forms

angular-formbuilder