Question

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

谢谢。

Answer 1

只需在ngFor指令上使用toTuple [(1,2),(3,4),(5,6)] ~> loop ([], [], [(1,2),(3,4),(5,6)]) ~> loop (1::[], 2::[], [(3,4),(5,6)]) ~> loop (3::1::[], 4::2::[], [(5,6)]) ~> loop (5::3::1::[], 6::4::2::[], []) ~> (rev [5,3,1], rev [6,4,2]) ~> ... ~> ([1,3,5], [2,4,6])选项即可避免混乱：

模板

trackBy

组件

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

分叉的 Stackblitz Example

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

1 个答案: