A Guide to Linking Checked Boxes to Form Arrays with FormBuilder in Angular

Question

A Guide to Linking Checked Boxes to Form Arrays with FormBuilder in Angular

Currently, I am dealing with a collection of checkboxes and utilizing Angular's FormBuilder to handle my form. My objective is to link the values of the selected checkboxes to a form control named itemIds within my form group.

      constructor(private formBuilder: UntypedFormBuilder
        ) {
      }
    serviceTaskForm = this.formBuilder.group({
    ....
     itemIds : ['']
    })
  onCheckboxChange($event: MatLegacyCheckboxChange) {

  }

Regarding my HTML code:

  <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>

https://i.sstatic.net/GPIIZR7Q.png

I am aiming for the itemIds form control to be an array that includes all the selected checkbox values. Any insights on how I can achieve this?

angular typescript formbuilder

Answer 1

Answer №1

Ensure that your control for itemIds is a form control with an array value.
To set up the itemIds form control, utilize the setValue() or patchValue method to provide an array value.
If you are dealing with multiple checkboxes using a form control, implement the following:
- Create a method called onCheckBoxChange to toggle the checkbox selection in the array based on the event (checked/unchecked).
- Implement a method named isChecked to verify if 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 displaying in your view:

Avoid nesting the <mat-checkbox> inside the <mat-form-field>. Remove the <mat-form-field> element. Reference: Angular material Error when mat-checkbox is imported
Use the [checked] attribute instead of the [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>

Check out the Demo on StackBlitz

Answer 2

Ensure that your control for itemIds is a form control with an array value.
To set up the itemIds form control, utilize the setValue() or patchValue method to provide an array value.
If you are dealing with multiple checkboxes using a form control, implement the following:
- Create a method called onCheckBoxChange to toggle the checkbox selection in the array based on the event (checked/unchecked).
- Implement a method named isChecked to verify if 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 displaying in your view:

Avoid nesting the <mat-checkbox> inside the <mat-form-field>. Remove the <mat-form-field> element. Reference: Angular material Error when mat-checkbox is imported
Use the [checked] attribute instead of the [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>

Check out the Demo on StackBlitz

A Guide to Linking Checked Boxes to Form Arrays with FormBuilder in Angular

Answer №1

Similar questions

How to set focus on an input element in Angular 2/5

What could be the reason behind Typescript's unexpected behavior when handling the severity prop in Material UI Alerts?

Localization of Dates in Angular applications

Generating HTML content using Angular 8 and JSON data

The Google Chrome console is failing to display the accurate line numbers for JavaScript errors

FabricJS Canvas with a React DropDown Feature

Transferring an Image File from Angular 8 to a Spring Boot Application

The supplied parameters do not correspond with any valid call target signature for the HTTP delete operation

Disabling the Angular router link

Why are traditional Angular dependencies still necessary even when typedefinitions are being used?

Tips for obtaining results from a File Reader

Contrasts between importing libraries in angular.json vs. within a component

Missing 'id' property in object {`id`} when utilizing GraphQL with Typescript

Angular2 - how can I effectively organize the logic between my components and services?

"An error in the signature index results in the failure of the

Include a control within a form based on the Observable response

Is it necessary to include the file name in the path when uploading a file to a network server from the intranet?

Is SASS stylesheet supported by the Angular 2 Ahead-of-Time compiler?

How to locate a specific object by its ID within a JSON structure embedded in an HTML template

FilterService of PrimeNg