title: Build a reactive form where fields & values are populated in childrens components?
body: <p>I'm trying to build a reactive form nested in multiple components.
  I've beed looking for something like this everywhere:</p>
  
  <ul>
  <li><strong>Parent component</strong>: The top one contains the <code>&lt;form [formGroup]="form" novalidate&gt;</code></li>
  <li><strong>Children component</strong> is inside the parent component. It contains *ngFor looping on <code>formGroupName</code> of the form.</li>
  <li><strong>GrandChildren components</strong> are inside Children component. That's where fields and values are (<code>formControlName</code>).</li>
  </ul>
  
  <blockquote>
    <p>I need the <code>this.form.valueChanges</code> in the parent component to work and reporte data on change as expected.</p>
  </blockquote>
  
  <p>I would like each component to fetch the data its needs. In my case, fields and data comes from Firebase.</p>
  
  <p>I have not been able to find anything that looks like this. There only are forms that are built in on component with the classic adresses array. And the form is always built in the ParentComponent.</p>
  
  <p><strong>Question: Is it possible to build a form where fields and values are populated in childrens components ?</strong></p>
  
  <p><strong>form.component.ts</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="form" novalidate&gt;
    &lt;form-fieldset [form]="form"&gt;&lt;/form-fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>form-fieldset.component.ts</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div [formGroup]="form"&gt;
    &lt;fieldset *ngFor="let group of groups$ | async"&gt;
       &lt;form-values [formGroupName]="group.name" [form]="form"&gt;&lt;/form-values&gt;
    &lt;/fieldset&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>form-values.component.ts</strong></p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;ul [formGroup]="form"&gt;
  
     &lt;li *ngFor="let value of values$ | async"&gt;
       &lt;label&gt;
         &lt;input type="checkbox" [formControlName]="value.$key"&gt;
         {{value.$key}}
       &lt;/label&gt;
     &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>