title: How to bind form group to nested dynamically created components in Angular
body: <p>In my Angular 12 app I have this type of hierarchy:</p>
  <pre><code>- app.component
  -- Parent component with form (reactive)
  --- Component that creates the dynamic components
  ---- Dynamic component
  </code></pre>
  <p>and my formBuilder form looks like this:</p>
  <pre><code>    form = this.fb.group({
          baseLevelControl: [&quot;base control&quot;],
          groupOfGroups: [this.fb.group({
              innerGroup1: this.fb.group({
                  dummy1Control1: &quot;control 1 from inner group 1&quot;,
                  dummy1Control2: &quot;control 2 from inner group 1&quot;,
              }),
              innerGroup2: this.fb.group({
                  dummy2Control1: &quot;control 1 from inner group 2&quot;,
                  dummy2Control2: &quot;control 2 from inner group 2&quot;,
              }),
          })]
      });
  </code></pre>
  <p>My dynamic component only needs to know about the groupOfGroups and not the whole form because it will be used in many places with different kinds of forms.</p>
  <p>When I set in the dynamic component</p>
  <pre><code>&lt;div [formGroup]=&quot;innerForm&quot;&gt;
  </code></pre>
  <p>I get a seperate independent form that does not communicate with parent form.
  If I use</p>
  <pre><code>&lt;div formGroupName=&quot;innerForm&quot;&gt;
  </code></pre>
  <p>I get error that <code>formGroupName must be used with a parent formGroup directive</code></p>
  <p>How can I properly bind the groupOfGroups?</p>
  <p>I've create <a href="https://stackblitz.com/edit/angular-ivy-tlhkfx?devtoolsheight=33&amp;file=src/app/app.component.html" rel="nofollow noreferrer">this stackblitz project</a> to emulate the issue, any help would be much appreciated</p>