Динамическое добавление FormArray в FormGroup не работает Angular

Question

Я использую Angular 8 и Реактивная форма .

Я хочу добавить FormArray элемент управления в основную группу форм.

Компонент

export class RsvpComponent implements OnInit {

  form: FormGroup;

  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {
    this.form = this.fb.group({
      name: ['', [
        Validators.required
      ]]
    });
  }

  public addGuest() {
    if (!this.form.get('guests')) {
      this.addGuestControl();
    }

    this.getGuestControlArray().push(this.guestControl());
  }

  private addGuestControl() {
    this.form.addControl('guests', new FormArray([]));
  }

  private getGuestControlArray() {
    return this.form.get('guests') as FormArray;
  }

  private guestControl(): FormGroup {
    const guestGroup = this.fb.group({
      name: ['', [
        Validators.required
      ]]
    });

    return guestGroup;
  }

  onSubmit() {
    console.log('submitted: ', this.form.value);
  }
}

addGuest вызывается по нажатию кнопки. По умолчанию гостей не будет, следовательно, элемент управления guests в форме не будет.

При вызове метода addGuest сначала проверяется наличие элемента управления guests, если нет, то сначала добавляется элемент управления. это тип FormArray.

Это отлично работает при первом нажатии и добавляются элементы управления, но при нажатии кнопки submit вызывается onSubmit и добавленные гостевые данные не находятся в значении .

При повторном вызове addGuest проверка на guests не удалась.

Stackbliz: https://stackblitz.com/edit/angular-bipdyu

Странное условие: код работает в Stackblitz, но когда я копирую тот же код в свой компонент (удаляя все), он не работает.

Answer 1

Проблема была связана со стратегией обнаружения изменений в Angular.

Здесь также ответили: Angular @ Привязка ввода при многократном вызове функции

Answer 2

Насколько я понимаю, вам нужно изменить метод guestControl(), чтобы он возвращал FormControl вместо FormGroup. FormGroup не может отследить внутреннее значение, оно действует только как старшая структура для «группировки» (!) Ваших FormControl s. Для любого фактического значения вам понадобятся такие.

private guestControl(): FormControl {
  const guestControl = this.fb.control('', Validators.required);
  return guestControl;
}

Должен сделать свое дело.