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

Question

我在这里有plunker演示：

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

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

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

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

}

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

Answer 1

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

你可以在这里阅读这个模式

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

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

你可以在这里阅读更多

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

你可以在这里找到关于反应形式的信息