title: How to group several checkboxes with angular-material
body: <p>Let's say I have a form to create a store. I want to input its name, and the days the store will be open.</p>
  
  <p>So I'll have a form, with some inputs, and I want to group checkboxes in one mat-form-field.</p>
  
  <p>store-form-component.html :</p>
  
  <pre><code>&lt;form (ngSubmit)="onSaveStore()" [formGroup]="storeForm"&gt;
    &lt;mat-form-field&gt;
      &lt;mat-label&gt;Store name&lt;/mat-label&gt;
      &lt;input matInput placeholder="store name" formControlName="name" required&gt;
    &lt;/mat-form-field&gt;
    &lt;mat-form-field [formGroup]="storeForm.controls.availableDays&gt;
      &lt;mat-checkbox *ngFor="let availableDay of storeForm.controls.availableDays.controls; let i=index" formControlName="{{i}}"&gt;{{i}}&lt;/mat-checkbox&gt;
    &lt;/mat-form-field &gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>store-form-component.ts :</p>
  
  <pre><code>export class StoreFormComponent implements OnInit {
  
    // Form Groups
    storeForm: FormGroup;
  
    constructor(
      private formBuilder: FormBuilder
    ) {}
  
    ngOnInit(): void { 
      this.initForm();
    }
  
    initForm(): void {
      this.storeForm = this.formBuilder.group({
        name: "",
        availableDays: this.getAvailableDays()
      });
    }
  
    getAvailableDays(): FormGroup {
      return this.formBuilder.group({
        monday: false,
        tuesday: false,
        wednesday: false,
        thursday: false,
        friday: false,
        saturday: false,
        sunday: false
      });
    }
  </code></pre>
  
  <p>It does not work and I can't figure why...</p>
  
  <p>edit : thanks to @g-tranter (and others SO posts), I could fix the issue. The final code looks like :</p>
  
  <p>store-form-component.html :</p>
  
  <pre><code>&lt;form (ngSubmit)="onSaveStore()" [formGroup]="storeForm"&gt;
    &lt;div [formGroup]="storeForm.controls.availableDays"&gt;
      &lt;mat-checkbox *ngFor="let availableDay of days;" formControlName="{{availableDay}}"&gt;{{availableDay}}&lt;/mat-checkbox&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>store-form-component.ts :</p>
  
  <pre><code>export class StoreComponent implements OnInit {
    // Form Groups
    storeForm: FormGroup;
    days: Array&lt;string&gt;;
  
    constructor(private formBuilder: FormBuilder) {}
  
    ngOnInit(): void {
      this.initForm();
  
      // this is useful to iterate over the form group
      this.days = Object.keys(this.storeForm.controls.availableDays.value);
    }
  
    initForm(): void {
      this.storeForm = this.formBuilder.group({
        name: "",
        availableDays: this.getAvailableDays()
      });
    }
  
    getAvailableDays(): FormGroup {
      return this.formBuilder.group({
        monday: false,
        tuesday: false,
        wednesday: false,
        thursday: false,
        friday: false,
        saturday: false,
        sunday: false
      });
    }
  }
  </code></pre>