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, OnInit } 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 implements OnInit {
            validationForm: FormGroup;

            constructor() {}

            ngOnInit(): void {
              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-select-option *ngFor="let option of options" [value]="option.value"
                    >{{ option.label }}</mdb-select-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, OnInit } 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 implements OnInit {
            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() {}

            ngOnInit(): void {
              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, OnInit } 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 implements OnInit {
              validationForm: FormGroup;

              constructor() {}

              ngOnInit(): void {
                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


              <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, OnInit } 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 implements OnInit {
                validationForm: FormGroup;

                constructor() {}

                ngOnInit(): void {
                  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');
                }
              }
            

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.