Validation

Angular Bootstrap 5 Validation

Provide valuable, actionable feedback to your users with Angular form validation.

Basic example

Use mdbValidate directive to enable validation styles and mdb-error and mdb-success components to display validation messages.

Import ReactiveFormsModule to enable reactive forms validation in Angular.

  <form [formGroup]="validationForm"> <div class="row"> <div class="col-md-6"> <mdb-form-control> <input mdbValidate mdbInput type="text" id="form1" class="form-control" formControlName="firstName" required /> <label mdbLabel class="form-label" for="form1">First name</label> <mdb-error *ngIf=" firstName?.invalid && (firstName?.dirty || firstName?.touched) " >First name is required</mdb-error > <mdb-success *ngIf=" firstName?.valid && (firstName?.dirty || firstName?.touched) " >Looks good!</mdb-success > </mdb-form-control> </div> <div class="col-md-6"> <mdb-form-control> <input mdbValidate mdbInput type="text" id="form2" class="form-control" formControlName="lastName" required /> <label mdbLabel class="form-label" for="form2">Last name</label> <mdb-error *ngIf="lastName?.invalid && (lastName?.dirty || lastName?.touched)" >Last name is required</mdb-error > <mdb-success *ngIf="lastName?.valid && (lastName?.dirty || lastName?.touched)" >Looks good!</mdb-success > </mdb-form-control> </div> </div> </form>  
  import { Component } from '@angular/core'; import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { validationForm: FormGroup; constructor() { this.validationForm = new FormGroup({ firstName: new FormControl(null, Validators.required), lastName: new FormControl(null, Validators.required), }); } get firstName(): AbstractControl { return this.validationForm.get('firstName')!; } get lastName(): AbstractControl { return this.validationForm.get('lastName')!; } }

Supported elements

Validation styles are available for the following form controls and components:

  • <input>s and <textarea>s with .form-control (including up to one .form-control in input groups)
  • .form-checks
  • mdb-select
  <form [formGroup]="validationForm"> <div class="mb-3 pb-1"> <mdb-form-control> <input mdbValidate mdbInput type="text" id="form1" class="form-control" formControlName="input" required /> <label mdbLabel class="form-label" for="form1">Example label</label> <mdb-error *ngIf="input?.invalid && (input?.dirty || input?.touched)" >Input invalid</mdb-error > <mdb-success *ngIf="input?.valid && (input?.dirty || input?.touched)" >Input valid</mdb-success > </mdb-form-control> </div> <div class="mb-3 pb-1"> <mdb-form-control> <textarea mdbValidate mdbInput type="text" id="form1" class="form-control" formControlName="textarea" required ></textarea> <label mdbLabel class="form-label" for="form1">Example label</label> <mdb-error *ngIf="textarea?.invalid && (textarea?.dirty || textarea?.touched)" >Input invalid</mdb-error > <mdb-success *ngIf="textarea?.valid && (textarea?.dirty || textarea?.touched)" >Input valid</mdb-success > </mdb-form-control> </div> <div class="mb-3 pb-1"> <mdb-form-control> <mdb-select mdbValidate [required]="true" formControlName="select"> <mdb-option *ngFor="let option of options" [value]="option.value" >{{ option.label }}</mdb-option > </mdb-select> <label mdbLabel class="form-label">Example label</label> <mdb-error *ngIf="select?.invalid && (select?.dirty || select?.touched)" >Input invalid</mdb-error > <mdb-success *ngIf="select?.valid && (select?.dirty || select?.touched)" >Input valid</mdb-success > </mdb-form-control> </div> <div class="form-check mt-5 mb-3 ms-2 pb-1"> <input mdbValidate mdbCheckbox class="form-check-input" type="checkbox" value="" id="flexCheckDefault" formControlName="checkbox" /> <label class="form-check-label" for="flexCheckDefault"> Default checkbox </label> <mdb-error *ngIf="checkbox?.invalid && (checkbox?.dirty || checkbox?.touched)" >Input invalid</mdb-error > <mdb-success *ngIf="checkbox?.valid && (checkbox?.dirty || checkbox?.touched)" >Input valid</mdb-success > </div> </form>  
  import { Component } from '@angular/core'; import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { validationForm: FormGroup; options = [ { value: '1', label: 'One' }, { value: '2', label: 'Two' }, { value: '3', label: 'Three' }, { value: '4', label: 'Four' }, { value: '5', label: 'Five' }, { value: '6', label: 'Six' }, { value: '7', label: 'Seven' }, { value: '8', label: 'Eigth' }, ]; constructor() { this.validationForm = new FormGroup({ input: new FormControl(null, Validators.required), textarea: new FormControl(null, Validators.required), select: new FormControl(null, Validators.required), checkbox: new FormControl(null, Validators.requiredTrue), }); } get input(): AbstractControl { return this.validationForm.get('input')!; } get textarea(): AbstractControl { return this.validationForm.get('textarea')!; } get select(): AbstractControl { return this.validationForm.get('select')!; } get checkbox(): AbstractControl { return this.validationForm.get('checkbox')!; } }

On blur validation

  <form [formGroup]="validationForm"> <div class="row"> <div class="col-md-6"> <mdb-form-control> <input mdbValidate mdbInput type="text" id="form1" class="form-control" formControlName="firstName" required /> <label mdbLabel class="form-label" for="form1">First name</label> <mdb-error *ngIf=" firstName?.invalid && (firstName?.dirty || firstName?.touched) " >First name is required</mdb-error > <mdb-success *ngIf=" firstName?.valid && (firstName?.dirty || firstName?.touched) " >Looks good!</mdb-success > </mdb-form-control> </div> <div class="col-md-6"> <mdb-form-control> <input mdbValidate mdbInput type="text" id="form2" class="form-control" formControlName="lastName" required /> <label mdbLabel class="form-label" for="form2">Last name</label> <mdb-error *ngIf="lastName?.invalid && (lastName?.dirty || lastName?.touched)" >Last name is required</mdb-error > <mdb-success *ngIf="lastName?.valid && (lastName?.dirty || lastName?.touched)" >Looks good!</mdb-success > </mdb-form-control> </div> </div> </form>  
  import { Component } from '@angular/core'; import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { validationForm: FormGroup; constructor() { this.validationForm = new FormGroup({ firstName: new FormControl(null, Validators.required), lastName: new FormControl(null, Validators.required), }); } get firstName(): AbstractControl { return this.validationForm.get('firstName')!; } get lastName(): AbstractControl { return this.validationForm.get('lastName')!; } }

On submit validation

  <form [formGroup]="validationForm" (ngSubmit)="onSubmit()"> <div class="row"> <div class="col-md-6"> <mdb-form-control> <input mdbValidate mdbInput type="text" id="form1" class="form-control" formControlName="firstName" required /> <label mdbLabel class="form-label" for="form1">First name</label> <mdb-error *ngIf=" firstName?.invalid && (firstName?.dirty || firstName?.touched) " >First name is required</mdb-error > <mdb-success *ngIf=" firstName?.valid && (firstName?.dirty || firstName?.touched) " >Looks good!</mdb-success > </mdb-form-control> </div> <div class="col-md-6"> <mdb-form-control> <input mdbValidate mdbInput type="text" id="form2" class="form-control" formControlName="lastName" required /> <label mdbLabel class="form-label" for="form2">Last name</label> <mdb-error *ngIf="lastName?.invalid && (lastName?.dirty || lastName?.touched)" >Last name is required</mdb-error > <mdb-success *ngIf="lastName?.valid && (lastName?.dirty || lastName?.touched)" >Looks good!</mdb-success > </mdb-form-control> </div> </div> <button type="submit" class="btn btn-primary mt-4">Submit</button> </form>  
  import { Component } from '@angular/core'; import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { validationForm: FormGroup; constructor() { this.validationForm = new FormGroup({ firstName: new FormControl(null, { validators: Validators.required, updateOn: 'submit' }), lastName: new FormControl(null, { validators: Validators.required, updateOn: 'submit' }), }); } get firstName(): AbstractControl { return this.validationForm.get('firstName')!; } get lastName(): AbstractControl { return this.validationForm.get('lastName')!; } onSubmit(): void { this.validationForm.markAllAsTouched(); } }
24H 00M 00S

Get one of the limited daily offers for AI Bundles with 98% OFF for our Black Days Sale!

Validation - API

Import

  import { MdbValidationModule } from 'mdb-angular-ui-kit/validation'; import { ReactiveFormsModule } from '@angular/forms'; … @NgModule ({ ... imports: [MdbValidationModule, ReactiveFormsModule], ... })

Inputs

mdbValidate

Name Type Default Description
validateError boolean true Enables error validation.
validateSuccess boolean true Enables success validation.