构建一个响应式表单，其中字段和值填充在子组件中？

Question

我正在尝试构建嵌套在多个组件中的反应式表单。我一直在到处寻找这样的东西：

父组件：最上面的包含<form [formGroup]="form" novalidate>
子组件在父组件内部。它包含 *ngFor 在表单的 formGroupName 上循环。
GrandChildren 组件 在 Children 组件内。这就是字段和值所在的位置 (formControlName).

I need the this.form.valueChanges in the parent component to work and reporte data on change as expected.

我希望每个组件都能获取其需要的数据。就我而言，字段和数据来自 Firebase。

我找不到类似这样的东西。只有带有经典地址数组的组件内置表单。并且表单始终构建在 ParentComponent 中。

问题：是否可以构建一个在子组件中填充字段和值的表单？

form.component.ts

<form [formGroup]="form" novalidate>
  <form-fieldset [form]="form"></form-fieldset>
</form>

形式-fieldset.component.ts

<div [formGroup]="form">
  <fieldset *ngFor="let group of groups$ | async">
     <form-values [formGroupName]="group.name" [form]="form"></form-values>
  </fieldset>
</div>

形式-values.component.ts

 <ul [formGroup]="form">

   <li *ngFor="let value of values$ | async">
     <label>
       <input type="checkbox" [formControlName]="value.$key">
       {{value.$key}}
     </label>
   </li>

</ul>

Answer 1

我找到了我的解决方案。我只需要移动子组件中的初始值。

构建一个响应式表单，其中字段和值填充在子组件中？

Build a reactive form where fields & values are populated in childrens components?

reactive-programming

observable

angular2-forms

angular