Question

我在这里有plunker演示：

，其地址组件嵌套在父组件中。

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

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

}

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

Answer 1

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

您可以阅读此模式here

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

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

您可以阅读更多here

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

您可以找到有关反应形式here

的信息