使用组件进行角度2表单级别验证

Question

在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的提供者!" 我搜索了解决方案,但没有找到任何允许父表单控件容器验证的解决方案.

我认为创建添加到表单控件容器的自定义可重用输入组件将是Angular 2中的常见方案.

我无法在那里进行映像,无法将自定义组件中的输入添加到父表单组件中,以便启用表单级别验证.

Answer 1

不确定这是否适合您的方案,但我认为它有效.

您可以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()但你可能不得不处理更新周期变得有点混乱.