Angular 8|9 Checkbox Tutorial with Multi Checkbox Validation

Last updated on by Digamber
A step by step tutorial on handling multiple checkboxes in Angular 8|9, we will learn how to create, select and unselect multiple checkboxes and validate checkboxes with Angular Reactive Forms.

angular checkbox demo

A checkbox is also known as the tick-box and it is a Graphical User Interface widget that allows a user to choose one or many possible options.

Handling checkboxes in Angular 9 is quite simple and straightforward. Angular proposes two methods to deal with forms data, Template-driven, and Reactive Forms. However, In this tutorial we will focus on Reactive Forms.

Angular is remarkably helpful in dealing with two-way data-binding. If you want to go deeper, then you must check out our previous tutorial on Angular Form validation.

Setting Up Angular 9 Form

To work with this tutorial, first, we need to import and register ReactiveFormsModule and FormsModule service in the main app module to enable the form service. Open app.module.ts file and add the following code inside of it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Creating Checkbox

Let us use the FormBuilder method to build the form, define [formGroup]="" directive and (ngSubmit)="" click event with HTML form tag.

<form [formGroup]="form" (ngSubmit)="submitForm()" novalidate>
    <!-- Form elements goes here -->
    <input type="submit" value="Submit">
</form>

Configure Reactive Forms to work with Checkboxes in Angular 9. Import the following form services.

import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';

FormBuilder: The FormBuilder creates instances of a FormControl, FormGroup, or FormArray. It helps in creating complicated forms in Angular.

FormGroup: Creates the form object in Reactive Forms, and It contains FormControl and FormArray properties.

FormArray: FormArray is the same as FormGroup and holds the FormControl in an array form.

FormControl: It refers to a specific input field which contains the user entered value and defined inside the FormGroup..

Validators: It offers a set of pre-defined validators to validate a form in Angular and can be used by form controls.

We will show the checkboxes values dynamically in our Angular app, assign the fruits list in an array.

Data: Array<any> = [
  { name: 'Pear', value: 'pear' },
  { name: 'Plum', value: 'plum' },
  { name: 'Kiwi', value: 'kiwi' },
  { name: 'Apple', value: 'apple' },
  { name: 'Lime', value: 'lime' }
];

To initiate the Reactive Form, assign the FormGroup to a form variable.

form: FormGroup;

Inject the FormBuilder API in the constructor and create the main form object and bind it to FormBuilder.

The checkArray is the form control that is created using FormArray API, and It will hold the multiple checkboxes values in an array form.

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    checkArray: this.fb.array([])
  })
}

Handling Multiple Checkboxes

Now, we will create a simple functionality to handle multiple checkboxes using Angular Reactive Forms.

onCheckboxChange(e) {
  const checkArray: FormArray = this.form.get('checkArray') as FormArray;

  if (e.target.checked) {
    checkArray.push(new FormControl(e.target.value));
  } else {
    let i: number = 0;
    checkArray.controls.forEach((item: FormControl) => {
      if (item.value == e.target.value) {
        checkArray.removeAt(i);
        return;
      }
      i++;
    });
  }
}

To select all and unselect all value from a checkbox list, we used the following approach.

The onCheckboxChange() method takes one argument, and this value referred to the checkbox value when a user clicked on it.

To set the array for multiple checkboxes, we stated a checkArray variable with FormArray service, get the form control using the getter method.

Check if condition the condition is true, basically we are verifying if the user selected a checkbox, then we will push the checked item’s value in the checkArray form control using the JavaScript’s pus array method.

To remove the value from the checkArray form control, we are using the forEach method to get the FormControl array and checking if the selected value is matched with the checkbox value. Then, we are removing the checkbox value using JavaScript’s removeAt() method.

<form [formGroup]="form" (ngSubmit)="submitForm()" novalidate>

  <div *ngFor="let data of Data; let i=index">
    <label>
      <input type="checkbox" [value]="data.value" (change)="onCheckboxChange($event)" />
      {{data.name}}
    </label>
  </div>

  <input type="submit" value="Submit">
</form>

To display the checkboxes use the *ngFor loop. To select and unselect value from checkbox list use the onCheckboxChange($event) event with change event handler.

angular 9 multiple checkbox

Angular Checkbox Validation

In this step, we will validate Angular Checkbox using Validators Angular Form service. Our validation is simple. We will show an error message to the users initially and convey the message to tick on at-least one checkbox from the checkboxes list.

We have already imported the Validators service, add it to the checkArray form control, as given below.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
import { ValueTransformer } from '@angular/compiler/src/util';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  form: FormGroup;
  Data: Array<any> = [
    { name: 'Pear', value: 'pear' },
    { name: 'Plum', value: 'plum' },
    { name: 'Kiwi', value: 'kiwi' },
    { name: 'Apple', value: 'apple' },
    { name: 'Lime', value: 'lime' }
  ];

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      checkArray: this.fb.array([], [Validators.required])
    })
  }

  onCheckboxChange(e) {
    const checkArray: FormArray = this.form.get('checkArray') as FormArray;

    if (e.target.checked) {
      checkArray.push(new FormControl(e.target.value));
    } else {
      let i: number = 0;
      checkArray.controls.forEach((item: FormControl) => {
        if (item.value == e.target.value) {
          checkArray.removeAt(i);
          return;
        }
        i++;
      });
    }
  }

  submitForm() {
    console.log(this.form.value)
  }
}

Display the error message with the help of *ngIf condition in the Angular HTML template, here we are checking if the form control has the required parameter. If it is true then show the error else hide the error.

<form [formGroup]="form" (ngSubmit)="submitForm()" novalidate>

  <div *ngFor="let data of Data; let i=index">
    <label>
      <input type="checkbox" [value]="data.value" (change)="onCheckboxChange($event)" />
      {{data.name}}
    </label>
  </div>

  <p class="error" *ngIf="this.form.controls['checkArray'].errors?.required">
    Checkbox is required, select atleast one value.
  </p>

  <input type="submit" value="Submit">
</form>

Conclusion

We have finished the Angular 9 Checkbox tutorial. In this tutorial, we learned to create multiple and checkboxes, select and unselect multiple checkboxes, and set the checkboxes values in the reactive form. We also looked at the necessary validation for multiple checkboxes. You can get the full code of this tutorial on my Github repo.

Avatar
Digamber

Digamber Rawat is from Uttarakhand, located in northwestern part of India. He is a Full-stack developer by profession and a primary author of this blog.