ошибка TS2339 при попытке добавить дочернюю FormGroup в Angular

Question

Я использую Angular8 и пытаюсь добавить дочернюю FormGroup в форму, используя addControl:

    this.testForm = new FormGroup({
        id: new FormControl(0),
        people: new FormGroup({
        }),
    });
    this.testForm.controls['people'].addControl('numbers', new FormGroup({
        number: new FormControl('1234')
    }));

Это дает мне ошибку компилятора: error TS2339: Property 'addControl' does not exist on type 'AbstractControl'.

Действительно застрял с этим, так что все очень помогают!

Answer 1

Типа утверждения должно быть достаточно: вместо

    this.testForm.controls['people'].addControl( // ...

do

    (this.testForm.controls['people'] as FormGroup).addControl( //...

Answer 2

Расширенный класс FormGroup из AbstractControl имеет addControl, и этот метод не является частью родительского класса AbstractControl. Поэтому, когда вы используете метод get, возвращаемый элемент представляет собой AbstractControl, а не FormGroup, поэтому вы должны убедиться, что возвращаемый элемент является FormGroup, и правильно привести его для использования метода addControl.

Имея это в виду, вы можете используйте addControl, добавив в ваш код что-то вроде этого:

abstractControl : AbstractControl = this.formGroup.get(tab.id);
if(abstractControl instanceof FormGroup){
    (<FormGroup>abstractControl).addControl(segment.id, this.formBuilder.group({}));
}