使用组件进行角度2表单级别验证 [英] angular 2 form level validation using components

问题描述

在Angular 2中，如何在自定义组件中添加一个输入控件，该自定义组件将绑定到父组件中的窗体控件容器？ （后面的代码简化为BREVITY）

例如，我有一个表单组件（请注意按钮禁用绑定）

  @Component {
选择器：'my-form'，
模板：'
< form [ng-form-model] = myForm会> 
< my-special-input>< / my-special-input> 
< / form> 
< button [disabled] =！myForm.valid> 
'
} 
  

现在在我的特殊输入组件中，我想

  @component {
选择器：'我的特殊输入'
模板：'
 <需要输入ng-control ='名称'> 
}'
  

ng-control ='name'会产生错误否提供者为ControlContainer！
我已经搜索了解决方案，并没有发现任何可以进行父窗体控件容器验证的方法。

I会认为创建自定义可重用的输入组件将被添加到表单控件容器将是Angular 2中的常见场景。

我不能在那里添加输入在自定义组件中以一种可以启用表单级别验证的方式向父表单组件发送消息。您的方案的最佳方式，但我认为它的工作原理。

您可以在父元素上创建 Control ，并将其作为 @Input 给孩子。然后，孩子可以使用它作为表单元素的控件。

例如（

  @Component（{
 selector：'my-special-输入'
模板：`
< input type =text[ngFormControl] ='nameControl'> 
`
}）
 export class specialInputComponent implements OnInit {
 @Input（）nameControl; 
 
 $ b @Component（{
 selector：'my-form'，
 template：`
< form [ngFormModel] =myForm > 
 < / form> 
< button [disabled] =！myForm.valid>提交< / button> 
`，
指令：[specialInputComponent] 
}）
导出类formComponent {
 nameControl：Control ; 
 myForm：ControlGroup; 
 
构造函数（）{
 this.nameControl = new Control（，Validators.required）; 
 this.myForm = new ControlGroup（{special：this.nameControl}）; 
 
 
 $ / code $ / pre 
 $ b $你也可以传递 ControlGroup 给孩子，让孩子自己添加 addControl（），但你可能不得不处理更新周期变得有点混乱。  
In Angular 2 how do you add an input control in a custom component that will bind to the form control container in the parent component? (FOLLOWING CODE SIMPLIFIED FOR BREVITY)

For example, I have a form component (please note the button disabled binding)
@Component{
selector:'my-form',
template:'
<form [ng-form-model]="myForm">
    <my-special-input></my-special-input>
</form>
<button [disabled]="!myForm.valid">
'
}
Now in my special input component I would like to 
@component{
 selector:'my-special-input'
 template:'
    <input ng-control='name' required>
}'
ng-control='name' generates an error "No provider for ControlContainer!"
I have searched for solutions and haven't found any that would allow for parent form control container validation.

I would think creating custom reusable input components that get added to a form control container would be a common scenario in Angular 2. 

I cant image there there is no way add the input in the custom component to the parent form component in a way that would enable form level validation.
解决方案
Not sure if this is the best way for your scenario, but I think it works. 

You can create the Control on the parent element and pass it as @Input to the child. The child can then use it as the control on the form element.

For example (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});
        }
}
You could probably also pass the ControlGroup to the child and let the child add itself with addControl() but you might have to deal with the update cycle getting a little messy.

                        
这篇关于使用组件进行角度2表单级别验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！