如何在angular2中应用嵌套组件的表单验证

发布时间：2020-12-17 18:04:38 所属栏目：安全来源：网络整理

导读：我在这里有plunker演示： http://plnkr.co/edit/LX1m2zIpxe3M1Zs5F6zA?p=preview 其中一个地址组件嵌套在父组件中. 如何将表单验证应用于地址组件并获取表单提交上的地址组件的值？有人指导我获取嵌套组件的表单值. constructor(fb: FormBuilder) { this.myF

我在这里有plunker演示：

http://plnkr.co/edit/LX1m2zIpxe3M1Zs5F6zA?p=preview

其中一个地址组件嵌套在父组件中.

如何将表单验证应用于地址组件并获取表单提交上的地址组件的值？有人指导我获取嵌套组件的表单值.

constructor(fb: FormBuilder) {  
this.myForm = fb.group({  
  'name':  ['',Validators.required],'Phone':  ['',Validators.required]  
});

}

如何在父级中注入地址组件的值？这样做的最佳做法是什么,因为我不熟悉嵌套组件中的表单.请帮忙.

解决方法

你可以做到这一点,但它需要一些工作.首先,您需要创建一个智能和愚蠢的组件关系,持有html的哑组件和持有逻辑的智能组件(父组件).

你可以阅读这个模式here

你需要使用Angular的@Input和@Ouput来获取和发送哑组件的值.

然后,您可以使用Angular EventEmitter将表单值发送回智能组件

你可以阅读更多here

可以使用模板驱动的表单来完成此操作.看起来你当前的代码是模板驱动和反应的混合…我会用反应式表单来做这个,它会更简单.

你可以找到关于反应形式here

（编辑：李大同）

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