时间戳

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

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

问题描述

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

动态数组.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]
      }
   }
}

动态数组.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

谢谢你。

标签： angularangular-formsangular4-formsangular-formbuilder

解决方案

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

模板

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

零件

trackByFn(index: number) {
  return index;
}

分叉的Stackblitz示例

推荐阅读