Angular 5 Реактивная форма Не удается найти элемент управления с путем: 'addAmendmentGroups -> 0 -> addAmendmentArrayId'

Я пытаюсь создать форму, в которой пользователь может добавить несколько поправок к основному вкладу с помощью. Я следил за демонстрацией Angular Reactive Forms здесь и использую FormArray, заполненный через модель, и зацикленный в ngFor в HTML, чтобы повторить элементы управления в форме. Когда страница загружается, я получаю следующие ошибки. Cannot find control with path: 'addAmendmentGroups -> 0 -> addAmendmentArrayId' Cannot find control with path: 'addAmendmentGroups -> 0 -> memberId' Когда я нажимаю кнопку +, чтобы добавить дополнительные элементы управления на страницу, я получаю те же ошибки, но для каждого элемента управления. Я уверен, что мне чего-то не хватает, или это не работает для Angular5? В сторону: Да, я знаю, что addAmendmentGroups - ужасное имя для FormArray.

Model.ts

export class Contribution {
  amendments: Amendment[];
}

export class Amendment {
  addAmendmentArrayId: number;
  listType: ListType;
  numberReference: number;
  whiteListId: number;
  whiteListReference: number;
  memberId: number[];
}

export enum ListType {
  Numbered = 0,
  White = 1
}

Component.ts

export class AmendmentFormComponent implements OnChanges {
  @Input()
  contribution: Contribution;

  form: FormGroup;

  public amendmentView: string;

  constructor(private fb: FormBuilder) { this.createForm(); }

  propagateChange = (_: any) => {};
  propagateTouch = (_: any) => {};

  createForm() {
    this.form = this.fb.group({
      listType: 0,

      addAmendmentGroups: this.fb.array([
        this.fb.group({
          addAmendmentGroupId: 0,
          listType: 0,
          numberedListReference: [{ value: 0, disabled: false }, Validators.required],
          whiteListId: [{ value: 0, disabled: true }, Validators.required],
          whiteListNumberReference: [{ value: 0, disabled: true }, Validators.required],
          memberName: ['', Validators.required]
        })
      ]),
      foobar: ''
    });
  }

  ngOnChanges() {
    this.rebuildForm();
  }

  rebuildForm() {
    this.form.reset({
      listType: 0,
      foobar:''
    });
    this.setAmendments(this.contribution.amendments);
  }

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

  setAmendments(amendments: Amendment[]) {
    const amendmentFGs = amendments.map(amendment => this.fb.group(amendment));
    const amendmentFormArray = this.fb.array(amendmentFGs || []);
    this.form.setControl('addAmendmentGroups',amendmentFormArray);
  }
  addAmendment() {
    this.addAmendmentGroups.push(this.fb.group(new Amendment()));
  }
}

Component.html

<div class = "content">
  <p>Form Value:{{ form.value | json }}</p>
  <h4 class = "content-title">Add amendment</h4>
  Amendment View Id :<strong>{{ amendmentView }}</strong>
  <form [formGroup] = "form">
    <div formArrayName = "addAmendmentGroups">
      <div *ngFor = "let amendment of form.controls.addAmendmentGroups.controls; let i = index" >
        <div [formGroupName] = "i">

          <input type = "text" formControlName = "addAmendmentArrayId" value = "{{addAmendmentArrayId}}">
          <div class = "row form-item">
            <div class = "col-lg-2 item-instance">
              <ul class = "radio-list">
                <li>
                  <input type = "radio" formControlName = "listType" [value] = "0" name = "listType" checked data-test = "listTypeNumbered" tabindex = "1" />
                  <span>Numbered List</span>
                </li>
                <li>
                  <input type = "radio" formControlName = "listType" [value] = "1" name = "listType" data-test = "listTypeWhite" tabindex = "3" />
                  <span>Whitelist</span>
                </li>
              </ul>
            </div>
          </div>
          Index = {{i}}<br />
          <input type = "text" formControlName = "numberedListReference" [placeholder] = "NUMBEREDLISTREFERENCE" data-test = "numberedListReference" tabindex = "2" />Reference
          <input type = "number" formControlName = "whiteListId" />
          <input type = "text" formControlName = "whiteListNumberReference" [placeholder] = "WHITELISTREFERENCE" data-test = "whiteListNumberReference" tabindex = "5" />White
          <input type = "number" formControlName = "memberId" />
          <!--<oir-amendment-group [formControlName] = "i"></oir-amendment-group>-->
          <br />
        </div>

      </div>
    </div>
    <input type = "text" formControlName = "foobar" value = "" id = "" />
    <button (click) = "addAmendment()">+</button>
  </form>
</div>

Обновлять: Я исправил опорные ошибки между моей моделью и компонентом, и это устранило ошибки при загрузке. Я обновил свой компонент, чтобы нажимать formGroup при нажатии кнопки «Добавить». Однако это просто подталкивает существующую группу форм, а не новый экземпляр группы форм.

createForm() {
    this.amendmentForm = this.fb.group({
      //addAmendmentArrayId: 0,
      listType: 0,
      numberReference: [{ value: 0, disabled: false }, Validators.required],
      whiteListId: [{ value: 0, disabled: true }, Validators.required],
      whiteListReference: [{ value: 0, disabled: true }, Validators.required],
      memberId: ['', Validators.required]
    })
    this.form = this.fb.group({
      addAmendmentGroups: this.fb.array([
        this.amendmentForm
      ]),
      foobar: ''
    });
}
  addAmendment() {
this.addAmendmentGroups.push(this.amendmentForm);

} Есть ли способ отправить новый экземпляр Adobe Illustrator в formArray, я знаю, что могу отправить экземпляр модели с помощью this.addAmendmentGroups.push(new Amendment()), но это не позволяет проверить поля.