ошибка 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( // ...

делать

    (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({}));
}