如果从父级重新初始化FormGroup,则自定义组件FormControl会中断

Question

从我的自定义组件中使用的父组件重新初始化formGroup时遇到问题.我得到的错误是:

没有FormControl实例附加到具有名称的表单控件元素:'selectedCompany'

HTML:

<form [formGroup]="addForm">
     ...
     <my-custom-component formControlName="selectedCompany"></my-custom-component>
     ...
</form

<my-custom-component>是根据创建自定义formControl组件的有效方式创建的:https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html#implementing-controlvalueaccessor

零件

这是初始化formGroup变量的代码addForm:

let formTemp: any = {
    selectedCompany: new FormControl(null, [Validators.required]),
}

this.addForm = this._formBuilder.group(formTemp);

第一次addForm初始化一切都很好.但是当我重新打开表单所在的模态,并且执行相同的组件代码时,会发生上述错误.

Answer 1

我发现反复重新初始化formGroup并不好,因为组件会丢失对旧formGroup的引用.

如果设置值是显示新表单所需的值,.setValue那么解决方案是:

零件

而不是重新初始化addForm,检查是否addForm先前已初始化,如果是,则仅为现有设置值FormControls:

if (this.addForm) {
    this.addForm.setValue({
        selectedCountry: null
    })
} else {

    let formTemp: any = {
        selectedCompany: new FormControl(null, [Validators.required]),
    }

    this.addForm = this._formBuilder.group(formTemp);
}

通过这种方式,我认为,引用不会丢失addForm,因此不会发生错误.

Answer 2

我对于解决办法是更换formControlName用formControl。

代替

<my-custom-component formControlName="selectedCompany"></my-custom-component>

使用

<my-custom-component [formControl]="addForm.controls['selectedCompany']"></my-custom-component>

或与一些getMethod采取 formControl

也会出现错误：

没有将FormControl实例附加到具有路径的表单控制元素

我用过的地方FormArray。