title: Dynamically adding FormArray to the FormGroup is not working Angular
body: <p>I'm using <strong>Angular 8</strong> and <strong>Reactive Form</strong>.</p>
  
  <p>I want to add <code>FormArray</code> control to the main form group.</p>
  
  <p>The component is</p>
  
  <pre><code>export class RsvpComponent implements OnInit {
  
    form: FormGroup;
  
    constructor(
      private fb: FormBuilder
    ) { }
  
    ngOnInit() {
      this.form = this.fb.group({
        name: ['', [
          Validators.required
        ]]
      });
    }
  
    public addGuest() {
      if (!this.form.get('guests')) {
        this.addGuestControl();
      }
  
      this.getGuestControlArray().push(this.guestControl());
    }
  
    private addGuestControl() {
      this.form.addControl('guests', new FormArray([]));
    }
  
    private getGuestControlArray() {
      return this.form.get('guests') as FormArray;
    }
  
    private guestControl(): FormGroup {
      const guestGroup = this.fb.group({
        name: ['', [
          Validators.required
        ]]
      });
  
      return guestGroup;
    }
  
    onSubmit() {
      console.log('submitted: ', this.form.value);
    }
  }
  </code></pre>
  
  <p>The <code>addGuest</code> is called on click of a button. By default there will be no guests hence, no <code>guests</code> control in the form.</p>
  
  <p>On calling the method <code>addGuest</code>, it first checks if <code>guests</code> control is there, if not then adds the control first which is a <code>FormArray</code> type.</p>
  
  <p>This works fine on first click and controls are added, but on clicking of the <code>submit</code> button, <code>onSubmit</code> is called and the added guest data is not in the value.</p>
  
  <p>When calling again <code>addGuest</code> the check for <code>guests</code> control fails.</p>
  
  <p>Stackbliz: <a href="https://stackblitz.com/edit/angular-bipdyu" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-bipdyu</a></p>
  
  <p>The weird condition: The code is working in the Stackblitz, but when I copy the same code in my component, (removing everything), it's not working.</p>