How to bind selected checkbox values to Form Array with FormBuilder

Question

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?

Yong Shun · Accepted Answer · 2024-07-08 02:39:49Z

2

Your itemIds control should be a form control with the array value.
To initialize the itemIds form control, you should work with the setValue() or patchValue method and provide an array value.
For working multiple checkboxes with form control, you should have the following implementation:
- onCheckBoxChange method to toggle the selected checkbox value from the array by event (checked/unchecked).
- isChecked method to check the itemId is checked.

import {
  MatCheckboxModule,
  MatCheckboxChange,
} from '@angular/material/checkbox';

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

ngOnInit() {
  this.itemIdFormControl.patchValue([1]);
}

onCheckboxChange($event: MatCheckboxChange, itemId: number) {
  let value: number[] = this.itemIdFormControl.value;

  if ($event.checked) value.push(itemId);
  else value.splice(value.indexOf(itemId), 1);

  this.itemIdFormControl.setValue(value, {
    emitEvent: false,
  });
}

isChecked(itemId: number) {
  return this.itemIdFormControl.value.indexOf(itemId) > -1;
}

get itemIdFormControl() {
  return this.serviceTaskForm.controls['itemIds'];
}

For your view:

You can't implement the <mat-checkbox> in the <mat-form-field> element. Remove the <mat-form-field> element. Reference: Angular material Error when mat-checkbox is imported
Implement the [checked] attribute instead of [value] attribute.

<ng-container class="demo-select-all-checkboxes" *ngFor="let task of tasks">
  <mat-checkbox
    (change)="onCheckboxChange($event, task.itemId)"
    [checked]="isChecked(task.itemId)"
  >
    {{ task.itemId }} {{ task.invoice }}
  </mat-checkbox>
</ng-container>

Demo @ StackBlitz

answered Jul 8, 2024 at 2:39

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adoulou Over a year ago

Thanks for the response. I wanted to display the list of checkboxes like a <mat-select>, but it wasn't possible. Any idea how to do that? I've added a picture of a list in the post.

Yong Shun Over a year ago

Hi, it is possible to achieve, you just need to customize the label in the <mat-checkbox> elements. Something like: <mat-checkbox ...>IdItem {{ task.itemId }} - - Invoice Number {{ task.invoice }}</mat-checkbox> . If you want to display the elements vertically, make sure you need to add the <br /> element after <mat-checkbox>. My demo updated with your expected result roughly.

Collectives™ on Stack Overflow

How to bind selected checkbox values to Form Array with FormBuilder

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related