наилучшая практика добавления нового свойства в группу FormGroup

Question

Как правильно добавить новое свойство объекта в angular formGroup?

У меня есть эта настройка:

ngOnInit() {
  this.form = this.fb.group({
    // store is the formGroupname
    store: this.fb.group({
      // branch and code are formControlName
      branch: ['asdf', Validators.required],
      code: ['asdf', Validators.required],
    }),
    selector: this.createStock({}),
    stock: this.fb.array([
      this.createStock({product_id: '1', quantity: 20}),
      this.createStock({product_id: '2', quantity: 30}),
      this.createStock({product_id: '3', quantity: 40}),
    ]),
  });
}

А внутри свойства магазина я хочу добавить, если установлен флажок. После прочтения угловой документации у меня есть это решение, которое работает, но дает мне красную линию на vscode. Интересно, это правильный путь?

Решение:

onSubmitForm() {

  // adding dynamic formgroup
  if(this.form.get('checkBoxStore').value)
  this.form.get('store').addControl(
    'foo',
    this.fb.group({
      testingAdd: this.form.get('test').value,
    })
  );
}

Изображение:

Это дает мне сообщение об ошибке, но работает просто отлично. Странно, но хорошо.

Answer 1

Вы получаете эту ошибку, потому что FormGroup расширяет AbstractControl, когда вы используете get(), это тип AbstractControl, поэтому, чтобы решить эту проблему, вы должны преобразовать его в FormGroup

(this.form.get('store') as FormGroup).addControl(...)

См. stackblitz

Answer 2

Вы можете типизировать abstractformcontrol как formgroup и сохранить его изменяемый экземпляр в переменной и выполнить операцию addcontrol следующим образом:

const store: FormGroup = this.form.get('store') as FormGroup;
  store.addControl(
    'foo',
    this.fb.group({
      testingAdd: this.form.get('test').value,
    })
  );