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
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);
});
}