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

Question

查看我的plnkr：http://plnkr.co/edit/OSMtkjWGsDUz1wENtRDR?p=preview

我有 3 个组件：

1) App：基本形式。这包含对 "mini forms" 的引用，即代码

中的子控件

2) AppChild：这些代表单个 "mini form"

3) AppOption：这些是 AppChild

中的单个输入控件

您可以点击"Add Control"添加新的AppChild，点击"Click to add a new option +"为AppChild添加AppOption。

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

和基本表格 - 可以识别正确的迷你表格数量。

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

我在 plunkr 上添加了一条评论，我认为这是问题所在，但我不确定这是否是 reason/or 如何修复第 49 行

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

Answer 1

不是真正的完整解决方案，但请开始查看此示例。它可能会给你一些想法。

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

Answer 2

您可以创建 FormGroup 而不是 FormArray。

app.component.ts

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

然后在你的app-sub-form component

中操纵这个组

app-sub-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

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

Angular dynamically created nested reactive form - How to get child form values to update parent form value?

angular

angular-reactive-forms