3 回答

TA貢獻(xiàn)1799條經(jīng)驗 獲得超6個贊
一個簡單的解決方案是提供ControlContainer在viewProviders像你的孩子組成的數(shù)組:
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
...,
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class ChildComponent {}
Stackblitz示例
另請閱讀這篇文章,解釋其為何起作用。
Angular:嵌套模板驅(qū)動形式
更新資料
如果您正在尋找嵌套模型驅(qū)動的表單,那么這里是類似的方法:
@Component({
selector: 'my-form-child',
template: `<input formControlName="age">`,
viewProviders: [
{
provide: ControlContainer,
useExisting: FormGroupDirective
}
]
})
export class ChildComponent {
constructor(private parent: FormGroupDirective) {}
ngOnInit() {
this.parent.form.addControl('age', new FormControl('', Validators.required))
}
}
Ng運(yùn)行示例
更新2
如果您不知道確切的ControlContainer包裝類型是您的自定義組件(例如,控件位于FormArray指令內(nèi)),則只需使用通用版本:
import { SkipSelf } from '@angular/core';
import { ControlContainer} from '@angular/forms';
@Component({
...,
viewProviders: [{
provide: ControlContainer,
useFactory: (container: ControlContainer) => container,
deps: [[new SkipSelf(), ControlContainer]],
}]
})
export class ChildComponent {}

TA貢獻(xiàn)1841條經(jīng)驗 獲得超3個贊
另一個可能的解決方法:
@Directive({
selector: '[provide-parent-form]',
providers: [
{
provide: ControlContainer,
useFactory: function (form: NgForm) {
return form;
},
deps: [NgForm]
}
]
})
export class ProvideParentForm {}
只需將此指令放在子組件中節(jié)點層次結(jié)構(gòu)頂部的某個位置(在任何ngModel之前)。
工作原理:NgModel 使用@Host()限定父窗體的依賴關(guān)系查找。因此,父組件中的表單對于子組件中的NgModel不可見。但是我們可以使用上面演示的代碼將其注入并提供給子組件。
- 3 回答
- 0 關(guān)注
- 762 瀏覽
添加回答
舉報