ОШИБКА Ошибка: formArrayName должно использоваться с родительской директивой formGroup

Question

Я использую реактивный массив форм для одного из моих проектов. Я пытаюсь сделать динамическую форму, которая добавляет / удаляет поля по нажатию кнопки. Я получаю следующую ошибку в своем коде

ОШИБКА Ошибка: formArrayName должно использоваться с родительской директивой formGroup. Вы захотите добавить директиву formGroup и передать ей существующий экземпляр FormGroup

import { FormBuilder, FormArray, FormGroup } from '@angular/forms';


 public communicationForm: FormGroup;
  public items: FormArray;

  createItem(): FormGroup {
    return this.fb.group({
      communicationType: [''],
      communicationValue: ['']
    });
  }

  addItem(): void {
    // this.items = this.communicationForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.communicationForm = this.fb.group({
      items: this.fb.array([this.createItem()])
    }),
    this.items = this.communicationForm.get('items') as FormArray;
  }

<div class="col-md-6">
        <h3>Communications</h3>
        <div formArrayName="items" *ngFor="let item of communicationForm.get('items').controls; let i = index;">
            <div [formGroupName]="i">
                <select class="form-group col-md-5" (change)="changeCommunication($event)" formControlName="communicationType">
                    <option value="" disabled>Communications</option>
                    <option *ngFor="let communication of Communications" [ngValue]="communication.id">
                        {{communication.name}}
                    </option>
                </select>
            </div>
            <div [formGroupName]="i">
                <input type="text" class="col-md-6" formControlName="communicationValue">
            </div>
            <div [formGroupName]="i">
                <i class="fa fa-plus-circle" (click)="addItem()"></i>
            </div>
        </div>
    </div>

Answer 1

Добавить родительскую форму FormGroup:

<div class="col-md-6" [formGroup]="communicationForm">

Единственное, что я хотел бы изменить, это добавить геттер для элементов:

TS

get items(): FormArray {
  return this.communicationForm.get('items') as FormArray;
}

И ngOnInit:

ngOnInit() {
  this.communicationForm = this.fb.group({
    items: this.fb.array([this.createItem()])
  })
}

HTML

<div class="col-md-6">
        <h3>Communications</h3>
        <div formArrayName="items" *ngFor="let item of items.controls; let i = index;">
            <div [formGroupName]="i">
                <select class="form-group col-md-5" (change)="changeCommunication($event)" formControlName="communicationType">
                    <option value="" disabled>Communications</option>
                    <option *ngFor="let communication of Communications" [ngValue]="communication.id">
                        {{communication.name}}
                    </option>
                </select>
            </div>
            <div [formGroupName]="i">
                <input type="text" class="col-md-6" formControlName="communicationValue">
            </div>
            <div>
                <i class="fa fa-plus-circle" (click)="addItem()"></i>
            </div>
        </div>
    </div>

Answer 2

когда у нас FormArray НЕ закрыт в formGroup, мы используем

<form [formGroup]="items">
   <!--see that iterate over items.controls-->
   <!-- and create a formGroup= the variable -->
   <div *ngFor="let group of items.controls" [formGroup]="group">
      <input formControlName="communicationType">
      <input formControlName="communicationValue">
   </div>
</form>