Angular реактивные формы превращают форму группы в нулевой контроль формы

Question

У меня есть группа форм:

(<FormArray>this.myForm.get('rooms')).push(this.fBuilder.group({
                id: [element.id, [Validators.required]],
                foreground: this.fBuilder.group({
            foregroundImageUpload: [null],
            foregroundImageID: [background.foregroundImageID, [Validators.required]],
            foregroundImagePath: [background.foregroundImagePath, [Validators.required]]
        })
            }));

Но позже я хочу удалить группу форм и установить для нее значение null. Я попробовал это, но это не сработало:

this.myForm.controls.rooms['controls'][roomIndex].removeControl('foreground');

Answer 1

Используйте «методы» FormGroup и FormArray , не работайте напрямую с элементами управления.

В вашем случае:

//In steps:
const array=this.myForm.get('rooms') as FormArray //use 'get' to access a control
                                                  //or a formGroup/Formarray
const group=array.at(index)   //use 'at' to access the formGroup of the FormArray
group.removeControl('foreground') //use 'removeControl'

//in a unique line
(this.myForm.get('rooms') as FormArray).at(index)
    .removeControl('foreground')