在Angular 2中,如何在自定义组件中添加输入控件,该组件将绑定到父组件中的表单控件容器？ (以下代码简化了BREVITY)
例如,我有一个表单组件(请注意按钮禁用绑定)
@Component{
selector:'my-form',template:'
<form [ng-form-model]="myForm">
<my-special-input></my-special-input>
</form>
<button [disabled]="!myForm.valid">
'
}
现在在我的特殊输入组件中,我想
@component{
selector:'my-special-input'
template:'
<input ng-control='name' required>
}'
ng-control =’name’生成错误“没有ControlContainer的提供者！”
我搜索了解决方案,但没有找到任何允许父表单控件容器验证的解决方案.
不确定这是否适合您的方案,但我认为它有效.
您可以在父元素上创建Control并将其作为@Input传递给子元素.然后,孩子可以将其用作表单元素的控件.
例如(plunk)：
@Component({
selector:'my-special-input'
template:`
<input type="text" [ngFormControl]='nameControl' >
`
})
export class specialInputComponent implements OnInit{
@Input() nameControl;
}
@Component({
selector:'my-form',template:`
<form [ngFormModel]="myForm" >
<my-special-input [nameControl]="nameControl"></my-special-input>
</form>
<button [disabled]="!myForm.valid">Submit</button>
`,directives: [specialInputComponent]
})
export class formComponent{
nameControl:Control;
myForm: ControlGroup;
constructor(){
this.nameControl = new Control("",Validators.required );
this.myForm = new ControlGroup({special: this.nameControl});
}
}
您可能还可以将ControlGroup传递给子节点,让子节点使用addControl()添加自己,但您可能必须处理更新周期变得有点混乱.
