形式 – 使用组件的角度2形式级别验证

发布时间：2020-12-17 07:55:11 所属栏目：安全来源：网络整理

导读：在Angular 2中,如何在自定义组件中添加输入控件,该组件将绑定到父组件中的表单控件容器？ (以下代码简化了BREVITY) 例如,我有一个表单组件(请注意按钮禁用绑定) @Component{selector:'my-form',template:'form [ng-form-model]="myForm" my-special-input/my

在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中的常见方案.

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

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

您可以在父元素上创建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()添加自己,但您可能必须处理更新周期变得有点混乱.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!