如何在angular2中为嵌套组件应用表单验证答案

【问题标题】：How to apply form validations for nested components in angular2如何在angular2中为嵌套组件应用表单验证
【发布时间】：2016-01-05 05:22:35
【问题描述】：

我这里有 plunker 演示：

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

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

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

}

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

【问题讨论】：

标签： angular

【解决方案1】：

您可以这样做，但需要一些工作。首先需要建立一个智能组件和哑组件的关系，哑组件持有html，智能组件（父组件）持有逻辑。

你可以阅读这个模式here

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

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

你可以阅读更多here

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

您可以了解反应式表单here

【讨论】：