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

前端之家收集整理的这篇文章主要介绍了如何在angular2中应用嵌套组件的表单验证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在这里有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

猜你在找的Angularjs相关文章