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.

Show code

HTML
Typescript

        
            
            <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

Show code

HTML
Typescript

        
            
            <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

Show code

HTML
Typescript

        
            
              <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: Validators.required, updateOn: 'blur' }),
                    lastName: new FormControl(null, { validators: Validators.required, updateOn: 'blur' }),
                  });
                }

                get firstName(): AbstractControl {
                  return this.validationForm.get('firstName')!;
                }

                get lastName(): AbstractControl {
                  return this.validationForm.get('lastName')!;
                }
              }

On submit validation

Show code

HTML
Typescript

        
            
                <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

Show code

app.module.ts

        
            
          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.

Validation

Angular Bootstrap 5 Validation

Basic example

Supported elements

On blur validation

On submit validation

Related resources

Validation - API

Import

Inputs

mdbValidate