<my-formwizard [form]="form"> <input formControlName="name" type="text" /> </my-formwizard>
这是一个显示实现的插件：http://plnkr.co/edit/OSzjDQD63lwoEsyqdLvw?p=preview
我遇到异常：TypeError：无法读取null的属性’setParent’
有没有办法实现跨多个组件的反应形式？
更新：RC5有一个更清晰的错误消息,并且由于peeskillet的输入,如果自定义指令获取通过formGroup属性附加的FormGroup,则可以使用formControlName.更新的plunk显示了分布在两个组件上的表单：
<my-formwizard [form]="form" ngForm="form">
但那应该不存在.我认为甚至可能会创造一种全新的形式.应该删除.一旦你删除它,那么你将遇到另一个问题,说没有ControlContainer.ControlContainer是FormGroupDirective([formGroup]).
问题是由formControlName引起的.如果查看FormControlName directive的源代码,并查看构造函数,您将看到它需要ControlContainer依赖项.但不仅如此,它还有一个@ Host1装饰器,这意味着它只会在主机注入器中查找ControlContainer.
老实说,在这种情况下,我不太确定在这种情况下哪个注入器用作主机注入器,但看起来它不是具有表单组指令的注入器.也许是因为你如何设置组件.
我找到了一个解决方案,而不是使用formControlName,而是使用[formControl],只是传递一个FormControl实例. FormControlDirective没有这个问题(它需要一个ControlContainer),因为它可以在独立使用.
所以你可以这样做
<input [formControl]="nameCtrl" type="text" />
export class App {
form: FormGroup;
nameCtrl: FormControl;
constructor(fb: FormBuilder) {
this.nameCtrl = new FormControl('');
this.form = fb.group({
name: this.nameCtrl
});
}
}
也可以看看：
> How to tackle creating complex form with lots of custom components?了解一些设计理念.
1 – 有关此主题的详细阅读,请参阅Host and Visibility…
