Question

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

父组件：顶部组件包含<form [formGroup]="form" novalidate>
子组件位于父组件内。它包含* ngFor在表单的formGroupName上循环。
GrandChildren组件位于Children组件中。字段和值为（formControlName）。

我需要父组件中的this.form.valueChanges来工作并按预期报告有关更改的数据。

我希望每个组件都能获取其需要的数据。就我而言，字段和数据来自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

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

建立一个反应形式，其中字段和＆amp;儿童成分中是否填充了哪些值？

1 个答案: