如何获取父表单中识别的子组件中的控件？ （angular2 rc3）

Question

我刚刚将我正在处理的应用程序升级到最新版本的Angular 2（rc3），Router＆amp;表格（0.1.1）。我现在正试图将表格转换为最新的库和最佳做法。我正在使用Angular IO docs来尝试完成此操作。

如果我这样做，我可以让表单起作用：

<form #form="ngForm">
  <input type="text" name="firstName" [(ngModel)]="model.firstName" required />
</form>

但我将表单拆分为多个组件 - 页面上有4个部分，所以我有一个组件代表每个部分，每个部分有5-10个不同类型的输入字段。

所以我的代码基本上是：

<form #form="ngForm">
  <section-1 [(model)]="model"></section-1>
  <section-2 [(model)]="model"></section-2>

  <button type="submit">Submit</button>
</form>

但是表单不会将子组件中的控件添加到表单的控件列表中。最好的方法是什么？我可以在每个子组件中放置一个跟踪其自身有效状态的表单，并使用父表单来管理4种不同的有效状态＆＃39;手动＆＃39;，但似乎应该有更好的方法。

谢谢，

丹

Answer 1

您可以在父级中使用模型变量来表示可能包含多个字段的子组件，然后在正确实现ControlValueAccessor接口后，子组件将开始充当父表单中的表单控件，该接口告诉Angular 2如何传播模型和视图之间的值。在here

中查找第三个示例