In this article, we will discuss How to validate multiple checkboxes in Ionic 4|5 application using Angular Reactive Forms.
Here we will have a list of the checkbox which can be selected or unselected using a single master checkbox and also individually.
We will add validation on checkbox list using Reactive form approach provided by Angular core API.
Let’s get started with the implementation.
Version Check
@ionic/cli _ _ (_) ___ _ __ (_) ___ | |/ _ \| '_ \| |/ __| | | (_) | | | | | (__ |_|\___/|_| |_|_|\___| CLI 6.4.1
Update to the latest version of Ionic CLI by running following NPM command:
$ npm install -g @ionic/cli
Create an Ionic Application
Using @ionic/cli
we will create a new Ionic application using Angular framework with a blank
template:
$ ionic new ionic-checkbox-validation blank --type=angular
Configuration for Angular Forms
To use forms in Angular application, we need to import FormsModule
and ReactiveFormsModule
in the page module file.
As we are going to implement in Home Page so open home.module.ts file import these modules as shown below:
// home.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { HomePage } from './home.page'; @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule, IonicModule, RouterModule.forChild([ { path: '', component: HomePage } ]) ], declarations: [HomePage] }) export class HomePageModule { }
Home Page Template
Adding Form
In the Home page template HTML, we will add a form with [formBuilder]
directive property. The form submit event will be handled by (ngSubmit)
method on the form.
<form [formGroup]="ionicFormGroup" (ngSubmit)="submitForm()">
...
</form>
Checkbox list
In the form element, define checkbox elements in ion-list
UI component directive. It will iterate over CHECK_LIST
data object using *ngFor
directive as shown below:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Ionic Multi Checkbox Validation
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<form [formGroup]="ionicForm" (ngSubmit)="submitForm()">
<ion-list>
<ion-item *ngFor="let item of CHECK_LIST; let i=index">
<ion-label>{{item.name}}</ion-label>
<ion-checkbox slot="end" [value]="item.value" [checked]="item.checked"
(ionChange)="onSelectionChange($event,i)">
</ion-checkbox>
</ion-item>
<ion-item *ngIf="isFormSubmitted && ionicForm.controls['checkboxArrayList'].errors?.required">
<label class="error-msg">
Please select Hobby!
</label>
</ion-item>
<ion-item class="center">
<ion-button type="submit">Submit Form</ion-button>
</ion-item>
</ion-list>
{{CHECK_LIST | json}}
</form>
</ion-content>
In the above template, we have also added a label
element to show an error message when no checkbox is selected. This message will only be shown after a user submits the form as we have added a variable isFormSubmitted
on *ngIf
condition.
Home Component Class
The list of checkboxes will be created dynamically by iterating over the CHECK_LIST object will look like this:
CHECK_LIST = [
{ name: 'Photography', value: 'Photography', checked: true },
{ name: 'Blogging', value: 'Blogging' },
{ name: 'Cooking', value: 'Cooking' },
{ name: 'Singing', value: 'Singing' },
{ name: 'Dancing', value: 'Dancing' },
{ name: 'Pottery', value: 'Pottery' },
{ name: 'Knitting', value: 'Knitting' }
];
We can set the checked
property to true
, if you want to set it checked by default.
To instantiate the form as Reactive we will define the ionicForm
as FormGroup.
ionicForm: FormGroup;
In the constructor, we will define checkbox list control as FormArray as shown below:
constructor(private formBuilder: FormBuilder) {
this.ionicForm = this.formBuilder.group({
checkboxArrayList: this.formBuilder.array([], [Validators.required])
});
}
To update the checkboxArrayList
on page load, we will update it in the updateCheckControl()
method which will also be called from checkbox change event in the onSelectionChange()
method.
updateCheckControl(cal, o) {
if (o.checked) {
cal.push(new FormControl(o.value));
} else {
cal.controls.forEach((item: FormControl, index) => {
if (item.value == o.value) {
cal.removeAt(index);
return;
}
});
}
}
onLoadCheckboxStatus() {
const checkboxArrayList: FormArray = this.ionicForm.get('checkboxArrayList') as FormArray;
this.CHECK_LIST.forEach(o => {
this.updateCheckControl(checkboxArrayList, o);
})
}
onSelectionChange(e, i) {
const checkboxArrayList: FormArray = this.ionicForm.get('checkboxArrayList') as FormArray;
this.CHECK_LIST[i].checked = e.target.checked;
this.updateCheckControl(checkboxArrayList, e.target);
}
After adding the above methods the final home.page.ts file will look like this:
// home.page.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
ionicForm: FormGroup;
isFormSubmitted = false;
CHECK_LIST = [
{ name: 'Photography', value: 'Photography', checked: true },
{ name: 'Blogging', value: 'Blogging' },
{ name: 'Cooking', value: 'Cooking' },
{ name: 'Singing', value: 'Singing' },
{ name: 'Dancing', value: 'Dancing' },
{ name: 'Pottery', value: 'Pottery' },
{ name: 'Knitting', value: 'Knitting' }
];
constructor(private formBuilder: FormBuilder) {
this.ionicForm = this.formBuilder.group({
checkboxArrayList: this.formBuilder.array([], [Validators.required])
});
this.onLoadCheckboxStatus();
}
updateCheckControl(cal, o) {
if (o.checked) {
cal.push(new FormControl(o.value));
} else {
cal.controls.forEach((item: FormControl, index) => {
if (item.value == o.value) {
cal.removeAt(index);
return;
}
});
}
}
onLoadCheckboxStatus() {
const checkboxArrayList: FormArray = this.ionicForm.get('checkboxArrayList') as FormArray;
this.CHECK_LIST.forEach(o => {
this.updateCheckControl(checkboxArrayList, o);
})
}
onSelectionChange(e, i) {
const checkboxArrayList: FormArray = this.ionicForm.get('checkboxArrayList') as FormArray;
this.CHECK_LIST[i].checked = e.target.checked;
this.updateCheckControl(checkboxArrayList, e.target);
}
submitForm() {
this.isFormSubmitted = true;
if (!this.ionicForm.valid) {
console.log('Please provide all the required values!')
return false;
} else {
console.log('Form Submitted', this.ionicForm.value)
}
}
}
In this tutorial, we implemented Reactive form validation on the checkbox list in Ionic 5 application. We added user Angular form core services to add validation on form. When no value is checked an error message is shown to the user. Thanks for reading!