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.

Looks good!
First name is required
Looks good!
Last name is required
<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
Input valid
Input invalid
Input valid
Input invalid
This value is valid
This value is invalid
Input valid
Input invalid
<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

Looks good!
First name is required
Looks good!
Last name is required
<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

Looks good!
First name is required
Looks good!
Last name is required
<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();
  }
}

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.