title: Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14
body: <p>In the other examples at StackOverflow there are many questions about using FormGroups in FormArrays. But my question is the opposite.</p>
  <p>FormArrays have a push method, that makes many things possible. FormGroups have indeed an addControl method for adding simple FormControls. AFAIK FormGroups do not have <code>addFormArray</code> or <code>addFormGroup</code> method. Therefore I need your help.</p>
  <p>Following situation:</p>
  <pre class="lang-js prettyprint-override"><code>this.myForm = this.fb.group({
    id: this.fb.control([this.book.id]),
    // or short form `id: [this.book.id],`
  });
  </code></pre>
  <p>Adding a simple control at a later point in time is easy:</p>
  <pre class="lang-js prettyprint-override"><code>this.myForm.addControl('isbn', this.fb.control(this.book.isbn));
  </code></pre>
  <p>But what about adding FormArrays and FormGroups into an existing FormGroup? For instance, I would like to use the following array and object for this purpose:</p>
  <pre class="lang-js prettyprint-override"><code>const authors  = ['George Michael', 'Aretha Franklin'];
  const metaData = { description : 'Great Book', publication: 2019}
  </code></pre>
  <p>I would like to add <code>authorsArray</code> or <code>metaData</code> only then if they are existing. That's the reason, why I want to add them at a later time.</p>
  <p>p.s. Please ignore the validation rules.</p>