title: Angular + Material - How to handle multiple checkboxes with formgroup
body: <p>I have a list of interests i am getting from the backend. I want a user to be able to select the interests they want. I will store only the interests they checked in the DB and pre-populate when they load the page. But first i need to get these interests the user has selected.</p>
  
  <p>interest.component.ts</p>
  
  <pre><code>export class InterestsComponent implements OnInit {
  
    interestFormGroup : FormGroup
    interests:any;
    selected: any;
  
  
    constructor(public interestService: InterestService, private formBuilder: FormBuilder,
    ) { }
  
    ngOnInit() {
  
      this.interestFormGroup = this.formBuilder.group({
        interests: this.formBuilder.array([])
      });
  
  
      this.interestService.all().subscribe((res) =&gt; {
  
        this.interests = res;
  
      });
  
    }
  
    change() {
      console.log(this.interestFormGroup.value);
    }
  
  }
  </code></pre>
  
  <p>interest.component.html</p>
  
  <pre><code>&lt;div id="interest"&gt;
  
      &lt;div class="interest-list"&gt;
  
          &lt;form [formGroup]="interestFormGroup"&gt;
              &lt;div *ngFor="let interest of interests" &gt;
                  &lt;mat-checkbox class="example-margin" formNameArray="interests" (change)="change()"&gt;{{interest}}&lt;/mat-checkbox&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>In my console.log on the change event it shows there is no values being added to the interests array within the interestFormGroup. Even tho the checkboxes are checked.</p>