Angular 7 反应式表单 - 在表单构建数组中选择位置

Question

我需要为表单构建器数组选择控件中的位置。

我需要这样做：testArray.controls[0] 但出现控制台错误。

它适用于 testArray.controls。但这不允许我在表单数组中选择特定索引

组件 HTML：

   <div formArrayName="formArray">

         <div *ngFor="let item of testArray.controls[0]; let i = index" 
         [formGroupName]="i">

         </div>

    </div>

组件 TS：

  public item = {
    field: [ '', [ Validators.required ] ]
  };

  public createForm(): void 
    this.form = this.fb.group({
      formArray:  this.fb.array([ this.createItem() ]),
    });
  }

  get testArray(): FormArray {
    return this.form.get('formArray') as FormArray;
  }

  public createItem(): FormGroup {
    return this.fb.group(this.item);
  }

Answer 1

当然可以，只是不能在 within for 循环中执行此操作。当您在循环中时，您已经处于单个项目级别。

Here 是一个演示这个想法的工作堆栈闪电战，但这个概念是这样的：

<div [formGroup]="form">
  <div formArrayName="formArray">
    <h2> As array</h2>
    <div *ngFor="let item of testArray.controls; let i = index">
      <input formControlName="{{i}}"> Item value: {{ item.value }}
    </div>
    <div>
      <h2>Individually, get the second item</h2>
      <input [formControl]="testArray.controls[1]"> Item value: {{ item.value }}
    </div>
  </div>
</div>