Angular 反应式表单将表单组变成空表单控件答案

【问题标题】：Angular reactive forms turn formgroup into null form controlAngular 反应式表单将表单组变成空表单控件
【发布时间】：2020-01-14 13:22:56
【问题描述】：

我有一个表单组：

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

但后来我想删除表单组并将其设置为空。我试过了，但没有用：

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

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案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')

【讨论】：