我一直致力于为具有许多嵌套组件的应用程序实现模型驱动表单。
这是我当前模板的片段
<div [formGroup]="formGroup">
<mycomponent1 [formParam]="getForm('myForm1')"></mycomponent1>
<mycomponent2 [formParam]="getForm('myForm2')"></mycomponent1>
<mycomponent3 [formParam]="getForm('myForm3')"></mycomponent1>
</div>
.ts文件片段
ngOnInit() {
this.formGroup= this.fb.group({
myForm1 = this.fb.group({...}),
myForm2 = this.fb.group({...}),
myForm3 = this.fb.group({...})
});
}
getForm(formName: string) {
return <FormGroup>this.formGroup.get(formName);
}
我的问题是:是否有人知道其他一些方法,以便将模型驱动的表单实现为嵌套组件,而不依赖于为子组件定义@Input
表单组参数?
我的意思是,如何避免为每个嵌套组件执行此操作?
@Input() formParam: FormGroup;
为什么我要问这个,因为我有更多的嵌套组件,我不得不在其余的嵌套组件中将表单组定义为@Input
,这是非常繁重的工作。
干杯。
答案 0 :(得分:0)
经过数小时的测试和研究,我终于找到了符合我要求的解决方案。这是:
我完全删除了子组件中的每个@Input() form: FromGroup
。
我的整个表单组树都是从父组件创建的。
我可以使用viewProvider
注入将单个表单组注入嵌套组件。
这是我的父模板
<div [formGroup]="form">
<div [formGroup]="form.get('myForm1')"> <mycomponent1></mycomponent1> </div>
<div [formGroup]="form.get('myForm2')"> <mycomponent2></mycomponent1> </div>
<div [formGroup]="form.get('myForm3')"> <mycomponent3></mycomponent1> </div>
</div>
父模板.ts文件
ngOnInit() {
this.formGroup= this.fb.group({
myForm1 = this.fb.group({...}),
myForm2 = this.fb.group({...}),
myForm3 = this.fb.group({...})
});
}
定义了视图提供程序的子组件
@Component({
selector: 'mycomponent1',
templateUrl: './mycomponent1.html',
viewProviders: [
{
provide: ControlContainer,
useExisting: FormGroupDirective
}
]
})
这里是注入表单组指令的地方,这样我就可以访问从父组件创建的表单组而不使用@Input() form: FormGroup
export class MyComponent1 {
constructor(public parent: FormGroupDirective) {}
}
在子模板中,我可以使用parent.form
<div>
<input formControlName="childControl1"></input>
<input formControlName="childControl2"></input>
<button[disabled]="parent.form.invalid" >Submit</button>
</div>