Angular动态创建嵌套的响应式表单 - 如何获取子表单值以更新父表单值？

Question

请参阅我的plnkr：http://plnkr.co/edit/OSMtkjWGsDUz1wENtRDR?p=preview

我有3个组件：

1）App：基本形式。这包含对“迷你形式”的引用，即代码中的子控件

2）AppChild：这些代表一个“迷你形式”

3）AppOption：这些是AppChild中的单个输入控件

您可以单击“添加控件”以添加新的AppChild，然后单击“单击以添加新选项+”以将AppOption添加到AppChild。

正如您在我的plnkr上看到的那样 - 每个迷你表格（子控制）都打印出正确的表格值。

基本形式 - 可以识别正确的迷你形式。

但是如何获取它以便迷你表单值包含在基本表单值中 - 而不是空数组[]？

我在plunkr上添加了一条评论，我认为这个问题是，但我不确定这是否是原因/或如何修复它第49行

initControl() {
return this.fb.array([]);
  }

Answer 1

您可以创建FormGroup而不是FormArray。

<强> app.component.ts

initControl() {
  return this.fb.group({});
}

然后在app-sub-form component

中操纵此群组

应用子form.component.ts

ngOnInit() {
  // We've already had FormGroup, so we can add control to it
  this.subForm.addControl('subOptions', this.fb.array([]));
  this.addOptions();
}

<强> Plunker Example

Answer 2

不是一个完整的解决方案，但是请看这个例子。它可能会给你一些想法。

https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2