angular - 如何为angular2中的嵌套组件应用表单验证

Question

我这里有 plunker 演示:

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

它有一个嵌套在父组件中的地址组件。

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

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

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

Answer 1

你可以做到这一点，但它需要一些工作。首先，您需要创建智能组件和dumb组件关系，dumb组件持有 html，而智能组件(父组件)持有逻辑。

您可以阅读有关此模式的信息 here

您需要使用 Angular 的 @Input 和 @Ouput 从dumb组件获取和发送值。

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

您可以阅读更多here

可以使用模板驱动的表单来做到这一点。看起来您当前的代码是模板驱动和响应式(Reactive)的混合...我会考虑使用响应式(Reactive)形式来做到这一点，它会更简单。

您可以找到响应式(Reactive) here