title: best practice of adding a new property to a formGroup
body: <p>What is the right way of adding a new object property to angular <code>formGroup</code>?</p>
  
  <p>I have this set up: </p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
    this.form = this.fb.group({
      // store is the formGroupname
      store: this.fb.group({
        // branch and code are formControlName
        branch: ['asdf', Validators.required],
        code: ['asdf', Validators.required],
      }),
      selector: this.createStock({}),
      stock: this.fb.array([
        this.createStock({product_id: '1', quantity: 20}),
        this.createStock({product_id: '2', quantity: 30}),
        this.createStock({product_id: '3', quantity: 40}),
      ]),
    });
  }
  </code></pre>
  
  <p>And inside the store property, I want to add if a checkbox is clicked. Upon reading on the angular documentation I have this solution that is working but giving me red line on vscode. I wonder is this the right way? </p>
  
  <p>Solution: </p>
  
  <pre class="lang-js prettyprint-override"><code>onSubmitForm() {
  
    // adding dynamic formgroup
    if(this.form.get('checkBoxStore').value)
    this.form.get('store').addControl(
      'foo',
      this.fb.group({
        testingAdd: this.form.get('test').value,
      })
    );
  }
  </code></pre>
  
  <p>Image: </p>
  
  <p><a href="https://i.stack.imgur.com/ig4Um.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ig4Um.png" alt="enter image description here"></a>
  It's giving me an error message but working just fine. Weird but ok.</p>