title: angular 10 checkbox value becomes undefined
body: <p>I configured the following formGroup in my component :</p>
  <pre><code>  constructor(private apiService: ApiService) {
      this.form = new FormGroup({
        product: new FormControl(),
        shops: new FormGroup({})
      });
    }
  </code></pre>
  <p>When I choose a vendor from a select bar, I want to load all its shops as checkboxes.
  In the function that loads the checkboxes I fill the formgroup :</p>
  <pre><code>  loadShops(product: string): void {
      this.apiService.getShopsThatSellProduct(product).subscribe({
        next: data =&gt; {
          this.shops = data;
          const checkboxes: FormGroup =  this.form.get('shops') as FormGroup;
          checkboxes.reset();
          this.shops.forEach((shop, index) =&gt; {
            checkboxes.addControl('shop_' + index, new FormControl(shop));
          });
        }
        ,
        error: err =&gt; {
          console.log(err.message);
        }
      });
    }
  </code></pre>
  <p>In my html I used the following code :</p>
  <pre><code>  &lt;div class=&quot;shops&quot;&gt;
      &lt;mat-form-field&gt;
        &lt;mat-select placeholder=&quot;Shops&quot;  &gt;
          &lt;mat-option formGroupName=&quot;shops&quot; *ngFor=&quot;let someFormControl of form.get('shops').value | keyvalue&quot;&gt;
            &lt;mat-checkbox  [formControlName]=&quot;someFormControl.key&quot;&gt; {{someFormControl.value.name}}&lt;/mat-checkbox&gt;
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  </code></pre>
  <p>Every shop has the following fields :</p>
  <pre><code>{
  name: string
  owner: string
  address : string
  }
  </code></pre>
  <p>After choosing a product the shops list is updated. However, all the shops are selected by default and when I try to select/unselect any shop option the value becomes undefinied.</p>
  <p>Why <code>{{someFormControl.value.name}}</code> becomes undefinied after the first &quot;unselect&quot; for every option ?</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-jqucog?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">stackbiz example</a></p>