Угловые 7 реактивных форм - выберите позицию в массиве Form Build

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

Конечно, вы можете, вы просто не можете сделать это из в , что для цикла.Когда вы находитесь в цикле, вы уже на уровне отдельного предмета.

Здесь рабочий стек, который демонстрирует идею, но концепция такова:

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