title: How to check all checkboxes in an Angular reactive form
body: <p>I have an Angular form that shows a list of checkboxes:</p>
  
  <pre><code>&lt;tbody formArrayName="approvedInvoices"
    *ngFor="let approvedInvoice of approvedInvoices; let i = index"&gt;
    &lt;tr&gt;
      &lt;td&gt;
          &lt;input type="checkbox" 
            [formControlName]="i" id="{{i}}"&gt;
      &lt;/td&gt;
      &lt;td style="padding-top: 18px"&gt;
        Invoice Number {{approvedInvoice.invoiceNumber}}
      &lt;/td&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>I create the form in my ngInit() :</p>
  
  <pre><code>approvedInvoices: ApprovedInvoice[];
  
  this.controls = this.approvedInvoices.map(c =&gt; new FormControl(false));
    this.form = this.formBuilder.group({
      approvedInvoices: new FormArray(this.controls)
    });
  </code></pre>
  
  <p>And this is my model:</p>
  
  <pre><code>export class ApprovedInvoice {
      invoiceNumber: string;
  } 
  </code></pre>
  
  <p>This works well, but my problem is that I don't know how to do a 'select all' .  I can get the list of invoices that are checked like this:</p>
  
  <pre><code>selectedInvoices() {
    return this.form.value.approvedInvoices
      .map((v, i) =&gt; v ? this.approvedInvoices[i] : null)
      .filter(v =&gt; v !== null);
  }
  </code></pre>
  
  <p>But I don't know how to check all the boxes.</p>
  
  <p>So far I have this:</p>
  
  <pre><code>selectAll() {
    for (var _i = 0; _i &lt; this.form.value.approvedInvoices.length; _i++) {
      this.form.value.approvedInvoices[_i] = true;
    }
  </code></pre>
  
  <p>Which marks all the invoices as selected, however the checkbox input does not change (ie, it's not ticked</p>