How to bind selected checkbox values to Form Array with FormBuilder

I have a list of checkboxes, and I'm using Angular's FormBuilder to manage my form. I'm trying to bind the selected checkbox values to a form control named itemIds in my form group.

constructor(private formBuilder: UntypedFormBuilder) {
}

serviceTaskForm = this.formBuilder.group({
...,
itemIds : ['']
});

onCheckboxChange($event: MatLegacyCheckboxChange) {
}


In HTML I' am using:

<form>
...
<mat-form-field appearance="fill">
<div class="demo-select-all-checkboxes" *ngFor="let task of tasks">
<mat-checkbox
(change)="onCheckboxChange($event)"
[value]="task.itemId">
{{ previousTask.itemId }} {{ previousTask.invoice }}
</mat-checkbox>
</div>
</mat-form-field>
</form>




I want the itemIds form control to be an array containing all the selected checkbox values. How can I achieve this?

Continue reading...