如何以角度 4 反应形式创建动态数组并将每个字段与输入(formControlName)绑定?

分享于2023年06月22日 angular angular-formbuilder angular-forms angular4-forms 问答
【问题标题】:How to create dynamic array in angular 4 reactive form and bind each field with input (formControlName)?如何以角度 4 反应形式创建动态数组并将每个字段与输入(formControlName)绑定?
【发布时间】:2023-06-20 22:57:01
【问题描述】:

我正在使用 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 = 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

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

谢谢。


【解决方案1】:

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

模板

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

组件

trackByFn(index: number) {
  return index;
}

分叉 Stackblitz Example

【讨论】: