title: Angular 2: Can't add form group to form array in reactive Forms
body: <p>I'm building dynamic form and want to add form groups 'on the fly'.</p>
  <p>Here is my code which almost works:</p>
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {FormGroup, FormBuilder, FormArray, Validators, FormControl} from &quot;@angular/forms&quot;;
  
  export class CombinedComponent implements OnInit {
  
      ltsForm: FormGroup;
  
      constructor(private formBuilder: FormBuilder) {
      }
  
      ngOnInit() {
          this.ltsForm = this.initFormGroup();
  
          // init products
          for (let i = 0; i &lt; 3; i++) { // add dynamically products
              this.addProduct();
          }
          
          console.log(this.ltsForm); // Array 'prods' is empty
      }
  
      // initialize form group, but don't add products yet because they will be added dynamically later
      initFormGroup() {
          let group = this.formBuilder.group({
              products: this.initProductGroup()
          });
  
          return group;
      }
  
      initProductGroup() {
          let group = this.formBuilder.group(
              {
                  //initialize empty formbuilder array
                  prods: this.formBuilder.array([])
              }
          );
  
          return group;
      }
  
      initProducts() {
          return this.formBuilder.group({
              id: [''],
              value: false, // checkbox value
          });
      }
  
      addProduct() {
          &lt;FormArray&gt;this.ltsForm.controls['products'].value.prods.push(this.initProducts());
  
          console.log(this.ltsForm); // Array 'prods' contains 3 FormGroup elements
      }
  } 
  </code></pre>
  <p>Template:</p>
  <pre><code>&lt;form [formGroup]=&quot;ltsForm&quot;
        novalidate
        (ngSubmit)=&quot;save(ltsForm)&quot;&gt;
  
      &lt;div formGroupName=&quot;products&quot;&gt;
          &lt;div formArrayName=&quot;prods&quot;&gt;
  
              &lt;div *ngFor=&quot;let product of ltsForm.controls.products.value.prods.controls; let i = index&quot;&gt;
                  &lt;div [formGroupName]=&quot;i&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;
                             formControlName=&quot;value&quot;
                             id=&quot;product_{{ i }}&quot;
                             name=&quot;product_{{ i }}&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;button type=&quot;submit&quot;
              [disabled]=&quot;!ltsForm.valid&quot;&gt;
          Submit
      &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>In method <code>addProduct()</code> I push the whole FormGroup element to the 'prods' array. So at the end the output from console in <code>ngOnInit()</code> contains just an empty 'prods' array, while the array from console output in <code>addProduct()</code> method has 3 elements. It looks like <code>this.ltsForm</code> looses its reference and isn't updating. Any ideas?</p>
  <p>UPD: Just found out that if I remove the whole content from template, I get the 'prods' filled with data.</p>