title: How to use array of checkbox objects in Angular reactive forms
body: <p>In Angular 7 using reactive forms, I'm trying to build an array of checkboxes. I'd like to use an array of objects instead of just [true, true, false] as a result. My objects have a name, an id and a boolean selected property. </p>
  
  <p>In my TypeScript:</p>
  
  <pre><code>myForm: FormGroup
  
  constructor(private fb: FormBuilder) {
      this.myForm = this.fb.group({
          myOptionsArray: this.fb.array([
              {
                  id: 1,
                  name: 'Option 1',
                  selected: false
              },
              {
                  id: 2,
                  name: 'Option 2',
                  selected: true
              },
              {
                  id: 3,
                  name: 'Option 3',
                  selected: false
              })
          ])
      })
  }
  </code></pre>
  
  <p>My template:</p>
  
  <pre><code>&lt;form [formGroup]="myForm"&gt;
      &lt;div formArrayName="myOptionsArray"&gt;
          &lt;div *ngFor="let myOption of myOptionsArray.controls; let i = index"&gt;
              &lt;div formGroupName="{{ i }}"&gt;
                  &lt;input name="i" type="checkbox" [formControl]="myOption" /&gt;
                  &lt;label&gt; {{ myOption.get('name').value }} &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I cannot get the selected property in the corresponding object to be updated. How do I manage to get each checkbox to update only the selected property in the array?</p>