Warm tip: This article is reproduced from stackoverflow.com, please click
angular typescript

How to check all checkboxes in an Angular reactive form

发布于 2020-03-27 15:42:46

I have an Angular form that shows a list of checkboxes:

<tbody formArrayName="approvedInvoices"
  *ngFor="let approvedInvoice of approvedInvoices; let i = index">
  <tr>
    <td>
        <input type="checkbox" 
          [formControlName]="i" id="{{i}}">
    </td>
    <td style="padding-top: 18px">
      Invoice Number {{approvedInvoice.invoiceNumber}}
    </td>
</tbody>

I create the form in my ngInit() :

approvedInvoices: ApprovedInvoice[];

this.controls = this.approvedInvoices.map(c => new FormControl(false));
  this.form = this.formBuilder.group({
    approvedInvoices: new FormArray(this.controls)
  });

And this is my model:

export class ApprovedInvoice {
    invoiceNumber: string;
} 

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:

selectedInvoices() {
  return this.form.value.approvedInvoices
    .map((v, i) => v ? this.approvedInvoices[i] : null)
    .filter(v => v !== null);
}

But I don't know how to check all the boxes.

So far I have this:

selectAll() {
  for (var _i = 0; _i < this.form.value.approvedInvoices.length; _i++) {
    this.form.value.approvedInvoices[_i] = true;
  }

Which marks all the invoices as selected, however the checkbox input does not change (ie, it's not ticked

Questioner
Robbie Mills
Viewed
376
Chellappan வ 2019-02-15 18:47

Use setValue method to set the value of individual form Controls in the formArray

selectAll(){
    this.form.get('approvedInvoices').controls.map(control=>{
      control.setValue(true);
    });
  }