Rate this docs

Angular Bootstrap validation

Angular Validation - Bootstrap 4 & Material Design

Angular Bootstrap validation is set of validators which can be used on various form inputs to provide valuable and actionable feedback to users.


Basic example and usage

In order to turn on validation on specific form control, add mdbValidate directive to it.

mdb-error and mdb-success components allow to display validation messages under the form element.

Warning

For the validation messages to be displayed correctly, place them together with the form control and its label inside a div element with class md-form.


          <form [formGroup]="validatingForm">
            <div class="md-form">
              <input mdbInput mdbValidate type="text" id="form1" class="form-control" formControlName="required">
              <label for="form1">Required validator</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>
            </div>
          </form>
        

          import { FormGroup, FormControl, Validators } from '@angular/forms';
          import { Component, OnInit } from '@angular/core';

          @Component({
          selector: 'validators-component-example',
          templateUrl: 'validators-example.html',
          })
          export class ValidatorsComponent implements OnInit {

            validatingForm: FormGroup;

            ngOnInit() {
              this.validatingForm = new FormGroup({
                required: new FormControl(null, Validators.required)
              });
            }

            get input() { return this.validatingForm.get('required'); }
          }
        

Reactive forms default validators

minLength Validator

minLength validation attribute is set to 3.


        <form [formGroup]="validatingForm">
          <div class="md-form">
            <input mdbInput mdbValidate type="text" id="form2" class="form-control" formControlName="minlength">
            <label for="form2">minLength validator</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>
          </div>
        </form>
      

        import { FormGroup, FormControl, Validators } from '@angular/forms';
        import { Component, OnInit } from '@angular/core';

        @Component({
        selector: 'validators-component-example',
        templateUrl: 'validators-example.html',
        })
        export class ValidatorsComponent implements OnInit {

        validatingForm: FormGroup;

        ngOnInit() {
          this.validatingForm = new FormGroup({
            minLength: new FormControl(null, [Validators.required, Validators.minLength(3)])
          });
        }

        get input() { return this.validatingForm.get('minLength'); }

        }
      

maxLength Validator

maxLength validation attribute is set to 5.


        <form [formGroup]="validatingForm">
          <div class="md-form">
            <input mdbInput mdbValidate type="text" id="form3" class="form-control" formControlName="maxLength">
            <label for="form3">maxLength validator</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>
          </div>
        </form>
      

        import { FormGroup, FormControl, Validators } from '@angular/forms';
        import { Component } from '@angular/core';

        @Component({
        selector: 'validators-component-example',
        templateUrl: 'validators-example.html',
        })

        export class ValidatorsComponent implements OnInit {

          validatingForm: FormGroup;

          ngOnInit() {
            this.validatingForm = new FormGroup({
              maxLength: new FormControl(null, [Validators.required, Validators.maxLength(5)])
            });
          }

          get input() { return this.validatingForm.get('maxLength'); }

          }
        }
      

Min value Validator

Min value is set to 10.


        <form [formGroup]="validatingForm">
          <div class="md-form">
            <input mdbInput mdbValidate type="number" id="form4" class="form-control" formControlName="min">
            <label for="form4">min value validator</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>
          </div>
        </form>
      

        import { FormGroup, FormControl, Validators } from '@angular/forms';
        import { Component, OnInit } from '@angular/core';

        @Component({
        selector: 'validators-component-example',
        templateUrl: 'validators-example.html',
        })

        export class ValidatorsComponent implements OnInit {

        validatingForm: FormGroup;

        ngOnInit() {
          this.validatingForm = new FormGroup({
            min: new FormControl(null, Validators.min(10))
          });
        }

        get input() { return this.validatingForm.get('min'); }

        }
      

Max value Validator

Max value is set to 10.


        <form [formGroup]="validatingForm">
          <div class="md-form">
            <input mdbInput mdbValidate type="number" id="form5" class="form-control" formControlName="max">
            <label for="form5">max value validator</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>
          </div>
        </form>
      

        import { FormGroup, FormContorl, Validators } from '@angular/forms';
        import { Component, OnInit } from '@angular/core';

        @Component({
        selector: 'validators-component-example',
        templateUrl: 'validators-example.html',
        })

        export class ValidatorsComponent implements OnInit {

          validatingForm: FormGroup;

          ngOnInit() {
            this.validatingForm = new FormGroup({
              max: new FormControl(null, Validators.max(10))
            });
          }

          get input() { return this.validatingForm.get('max'); }

        }
      

Email Validator


        <form [formGroup]="validatingForm">
          <div class="md-form">
            <input mdbInput mdbValidate type="email" id="form8" class="form-control" formControlName="email">
            <label for="form8">Email validator</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>
          </div>
        </form>
      

        import { FormGroup, FormControl, Validators } from '@angular/forms';
        import { Component, OnInit } from '@angular/core';

        @Component({
        selector: 'validators-component-example',
        templateUrl: 'validators-example.html',
        })

        export class ValidatorsComponent implements OnInit {

          validatingForm: FormGroup;

          ngOnInit() {
            this.validatingForm = new FormGroup({
              email: new FormControl(null, [Validators.required, Validators.email])
            });
          }

          get input() { return this.validatingForm.get('max'); }

        }
      

Pattern Validator

Pattern Validator should contains RegEx. With it, pattern is able to validate through regular expressions. In this example, RegEx allows to put only english letters into input.


        <form [formGroup]="validatingForm">
          <div class="md-form">
            <input mdbInput mdbValidate type="text" id="form7" class="form-control" formControlName="pattern">
            <label for="form7">only letters (pattern) validator</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>
          </div>
        </form>
      

        import { FormGroup, FormControl, Validators } from '@angular/forms';
        import { Component, OnInit } from '@angular/core';

        @Component({
        selector: 'validators-component-example',
        templateUrl: 'validators-example.html',
        })

        export class ValidatorsComponent implements OnInit {

          validatingForm: FormGroup;

          ngOnInit() {
            this.validatingForm = new FormGroup({
              pattern: new FormControl(null, Validators.pattern(/A-Za-z/))
            });
          }

          get input() { return this.validatingForm.get('max'); }

        }
      

Required Validator


        <form [formGroup]="validatingForm">
          <div class="md-form">
            <input mdbInput mdbValidate type="text" id="form1" class="form-control" formControlName="required">
            <label for="form1">Required validator</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>
          </div>
        </form>
      

        import { FormGroup, FormControl, Validators } from '@angular/forms';
        import { Component, OnInit } from '@angular/core';

        @Component({
        selector: 'validators-component-example',
        templateUrl: 'validators-example.html',
        })
        export class ValidatorsComponent implements OnInit {

          validatingForm: FormGroup;

          ngOnInit() {
            this.validatingForm = new FormGroup({
              required: new FormControl(null, Validators.required)
            });
          }

          get input() { return this.validatingForm.get('required'); }
        }
      

Update on submit


        <form [formGroup]="validatingForm">
          <div class="md-form">
            <input mdbInput mdbValidate type="text" id="form1" class="form-control" formControlName="onSubmit">
            <label for="form1">Required validator</label>
            <mdb-error *ngIf="onSubmit.invalid && (onSubmit.dirty || onSubmit.touched)">Input invalid</mdb-error>
            <mdb-success *ngIf="onSubmit.valid && (onSubmit.dirty || onSubmit.touched)">Input valid</mdb-success>
          </div>
        </form>
      

        import { FormGroup, FormControl, Validators } from '@angular/forms';
        import { Component, OnInit } from '@angular/core';

        @Component({
        selector: 'validators-component-example',
        templateUrl: 'validators-example.html',
        })
        export class ValidatorsComponent implements OnInit {

          validatingForm: FormGroup;

          ngOnInit() {
            this.validatingForm = new FormGroup({
              onSubmit: new FormControl(null, Validators.required)
            }, { updateOn: 'submit' });
          }

          get onSubmit() { return this.validatingForm.get('onSubmit'); }
        }
      

Update on blur


        <form [formGroup]="validatingForm">
          <div class="md-form">
            <input mdbInput mdbValidate type="text" id="form1" class="form-control" formControlName="onBlur">
            <label for="form1">Required validator</label>
            <mdb-error *ngIf="onBlur.invalid && (onBlur.dirty || onBlur.touched)">Input invalid</mdb-error>
            <mdb-success *ngIf="onBlur.valid && (onBlur.dirty || onBlur.touched)">Input valid</mdb-success>
          </div>
        </form>
      

        import { FormGroup, FormControl, Validators } from '@angular/forms';
        import { Component, OnInit } from '@angular/core';

        @Component({
        selector: 'validators-component-example',
        templateUrl: 'validators-example.html',
        })
        export class ValidatorsComponent implements OnInit {

          validatingForm: FormGroup;

          ngOnInit() {
            this.validatingForm = new FormGroup({
              onBlur: new FormControl(null, Validators.required)
            }, { updateOn: 'blur' });
          }

          get onBlur() { return this.validatingForm.get('onBlur'); }
        }
      

Template-driven forms default validators

minLength Validator

minLength validation attribute is set to 3.


          <form>
            <div class="md-form">
              <input mdbInput mdbValidate name="input" type="text" id="form2" class="form-control" [(ngModel)]="minLength" #input="ngModel" required minlength="3">
              <label for="form2">minLength validator</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>
            </div>
          </form>
        

maxLength Validator

maxLength validation attribute is set to 5.


          <form>
            <div class="md-form">
              <input mdbInput mdbValidate name="input" type="text" id="form3" class="form-control" [(ngModel)]="maxLength" #input="ngModel" required maxlength="5">
              <label for="form3">maxLength validator</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>
            </div>
          </form>
        

Min value Validator

Min value is set to 10.


          <form>
            <div class="md-form">
              <input mdbInput mdbValidate name="input" type="number" id="form4" class="form-control" [(ngModel)]="min" #input="ngModel" min="10">
              <label for="form4">min value validator</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>
            </div>
          </form>
        

Max value Validator

Max value is set to 10.


          <form>
            <div class="md-form">
              <input mdbInput mdbValidate name="input" type="number" id="form5" class="form-control" [(ngModel)]="max" #input="ngModel" max="10">
              <label for="form5">max value validator</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>
            </div>
          </form>
        

Email Validator


          <form>
            <div class="md-form">
              <input mdbInput mdbValidate name="input" type="email" id="form8" class="form-control" [(ngModel)]="email" #input="ngModel" required pattern="[^ @]*@[^ @]*">
              <label for="form8">Email validator</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>
            </div>
          </form>
        

Pattern Validator

Pattern Validator should contains RegEx. With it, pattern is able to validate through regular expressions. In this example, RegEx allows to put only english letters into input.


          <form>
            <div class="md-form">
              <input mdbInput mdbValidate name="input" type="text" id="form7" class="form-control" [(ngModel)]="pattern" #input="ngModel" required pattern="/A-Za-z/">
              <label for="form7">only letters (pattern) validator</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>
            </div>
          </form>
        

Required Validator


          <form>
            <div class="md-form">
              <input mdbInput mdbValidate name="input" type="text" id="form1" class="form-control" [(ngModel)]="required" #input="ngModel" required>
              <label for="form1">Required validator</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>
            </div>
          </form>
        

Update on submit


          <form [ngFormOptions]="{updateOn: 'submit'}">
            <div class="md-form">
              <input mdbInput mdbValidate name="input" type="text" id="form1" class="form-control" [(ngModel)]="submit" #input="ngModel" required>
              <label for="form1">Required validator</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>
            </div>
          </form>
        

Update on blur


          <form [ngFormOptions]="{updateOn: 'blur'}">
            <div class="md-form">
              <input mdbInput mdbValidate name="input" type="text" id="form1" class="form-control" [(ngModel)]="blur" #input="ngModel" required>
              <label for="form1">Required validator</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>
            </div>
          </form>
        

Validating other components

You can use the mdbValidate directive to validate other form components as well.


            <!-- Material form contact -->
<div class="row">
  <div class="col-md-6">
    <mdb-card>
      <mdb-card-header class="info-color text-center white-text py-4">
        <h5><strong>Register</strong></h5>
      </mdb-card-header>

      <!-- Card content -->
      <mdb-card-body class="px-lg-5 pt-0">
        <!-- Form -->
        <form [formGroup]="registerForm">
          <!-- Name -->
          <div class="md-form mt-3">
            <input type="text" id="materialContactFormName" class="form-control" mdbInput mdbValidate
              formControlName="nameInput" />
            <label for="materialContactFormName">Name</label>
            <mdb-error *ngIf="nameInput.invalid && (nameInput.dirty || nameInput.touched)">Input invalid</mdb-error>
            <mdb-success *ngIf="nameInput.valid && (nameInput.dirty || nameInput.touched)">Input valid</mdb-success>
          </div>

          <!-- E-mail -->
          <div class="md-form">
            <input type="email" id="materialContactFormEmail" class="form-control" mdbInput mdbValidate
              formControlName="emailInput" />
            <label for="materialContactFormEmail">E-mail</label>
            <mdb-error *ngIf="emailInput.invalid && (emailInput.dirty || emailInput.touched)">Input invalid</mdb-error>
            <mdb-success *ngIf="emailInput.valid && (emailInput.dirty || emailInput.touched)">Input valid</mdb-success>
          </div>

          <!-- Subject -->
          <div class="md-form">
            <mdb-select [options]="optionsSelect" label="Eyes color" mdbValidate formControlName="select"
              [allowClear]="true"></mdb-select>
            <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>
          </div>

          <div class="md-form">
            <mdb-autocomplete mdbValidate [label]="'Choose your country'" name="autocomplete" [datasource]="dataService"
              formControlName="autocomplete" [minSearchLength]="0">
            </mdb-autocomplete>
            <mdb-error *ngIf="autocomplete.invalid && (autocomplete.dirty || autocomplete.touched)">Input invalid</mdb-error>
            <mdb-success *ngIf="autocomplete.valid && (autocomplete.dirty || autocomplete.touched)">Input valid</mdb-success>
          </div>

          <div class="md-form">
            <mdb-date-picker mdbValidate name="mydate" [options]="myDatePickerOptions" formControlName="datepicker"
              placeholder="Birth date">
              formControlName="datepicker"></mdb-date-picker>
            <mdb-error *ngIf="datepicker.invalid && (datepicker.dirty || datepicker.touched)">Date invalid</mdb-error>
            <mdb-success *ngIf="datepicker.valid && (datepicker.dirty || datepicker.touched)">Date valid</mdb-success>
          </div>

          <!-- Message -->
          <div class="md-form">
            <textarea type="text" id="materialContactFormMessage" class="form-control md-textarea" mdbInput mdbValidate
              formControlName="address"></textarea>
            <label for="materialContactFormMessage">Address</label>
            <mdb-error *ngIf="address.invalid && (address.dirty || address.touched)">Input invalid</mdb-error>
            <mdb-success *ngIf="address.valid && (address.dirty || address.touched)">Input valid</mdb-success>
          </div>

          <div class="md-form">
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" id="materialInline1" name="radio" formControlName="radio"
                value="pro">
              <label class="form-check-label" for="materialInline1">Pro user</label>
            </div>

            <!-- Material inline 2 -->
            <div class="form-check form-check-inline">
              <input type="radio" class="form-check-input" id="materialInline2" name="radio" formControlName="radio"
                value="free">
              <label class="form-check-label" for="materialInline2">Free user</label>
            </div>

            <mdb-error *ngIf="radio.invalid && (radio.dirty || radio.touched)">Please choose user role</mdb-error>
            <mdb-success *ngIf="radio.valid && (radio.dirty || radio.touched)">User role valid</mdb-success>
          </div>


          <div class="md-form mb-5">
            <mdb-checkbox mdbValidate formControlName="terms" value="agree">I agree to Terms Of Service</mdb-checkbox>
            <mdb-error *ngIf="terms.invalid && (terms.dirty || terms.touched)">Please accept the terms</mdb-error>
            <mdb-success *ngIf="terms.valid && (terms.dirty || terms.touched)">Terms accepted</mdb-success>
          </div>

          <!-- Send button -->
          <button mdbBtn class="pt-5" color="info" outline="true" rounded="true" block="true" class="z-depth-0 my-4 waves-effect"
            mdbWavesEffect type="submit">
            Send
          </button>
        </form>
        <!-- Form -->
      </mdb-card-body>
    </mdb-card>
    <!-- Material form contact -->
  </div>
</div>
          

            import { FormGroup, FormControl, Validators } from '@angular/forms';
        import { Component, OnInit } from '@angular/core';
        import { CompleterService, CompleterData } from 'ng-uikit-pro-standard';
        import { IMyOptions } from 'ng-uikit-pro-standard';

        @Component({
        selector: 'validators-component-example',
        templateUrl: 'validators-example.html',
        })

        export class ValidatorsComponent implements OnInit {

        registerForm: FormGroup;

        optionsSelect = [
          { value: 'Green', label: 'Green' },
          { value: 'Blue', label: 'Blue' },
          { value: 'Brown', label: 'Brown' },
        ];

        public myDatePickerOptions: IMyOptions = {
          // Your options
          };

        protected searchStr: string;
        protected dataService: CompleterData;
        protected searchData = [
          { country: 'United States of America' },
          { country: 'Germany' },
          { country: 'Spain' },
          { country: 'France' },
          { country: 'Poland' }
        ];

        constructor(private completerService: CompleterService) {
          this.dataService = completerService.local(this.searchData, 'country', 'country');
        }

        ngOnInit() {
          this.registerForm = new FormGroup({
            nameInput: new FormControl(null, Validators.required),
            emailInput: new FormControl(null, [Validators.required, Validators.email]),
            select: new FormControl(null, Validators.required),
            autocomplete: new FormControl(null, Validators.required),
            datepicker: new FormControl(null, Validators.required),
            address: new FormControl(null, Validators.required),
            radio: new FormControl(null, Validators.required),
            terms: new FormControl(null, Validators.requiredTrue)
          });
        }

        get nameInput() { return this.registerForm.get('nameInput'); }
        get emailInput() { return this.registerForm.get('emailInput'); }
        get select() { return this.registerForm.get('select'); }
        get autocomplete() { return this.registerForm.get('autocomplete'); }
        get datepicker() { return this.registerForm.get('datepicker'); }
        get address() { return this.registerForm.get('address'); }
        get radio() { return this.registerForm.get('radio'); }
        get terms() { return this.registerForm.get('terms'); }
            }
          

Resetting a validation status


          <!-- Login form -->
          <form [formGroup]="loginForm">
            <p class="h5 text-center mb-4">Sign in</p>

            <div class="md-form">
              <i class="fa fa-envelope prefix grey-text"></i>
              <input mdbInput mdbValidate type="text" formControlName="defaultFormEmail" id="defaultForm-email" class="form-control">
              <label for="defaultForm-email">Your email</label>
              <mdb-error *ngIf="defaultFormEmail.invalid && (defaultFormEmail.dirty || defaultFormEmail.touched)">Input invalid</mdb-error>
              <mdb-success *ngIf="defaultFormEmail.valid && (defaultFormEmail.dirty || defaultFormEmail.touched)">Input valid</mdb-success>
            </div>

            <div class="md-form">
              <i class="fa fa-lock prefix grey-text"></i>
              <input mdbInput mdbValidate type="password" formControlName="defaultFormPass" id="defaultForm-pass" class="form-control">
              <label for="defaultForm-pass">Your password</label>
              <mdb-error *ngIf="defaultFormPass.invalid && (defaultFormPass.dirty || defaultFormPass.touched)">Input invalid</mdb-error>
              <mdb-success *ngIf="defaultFormPass.valid && (defaultFormPass.dirty || defaultFormPass.touched)">Input valid</mdb-success>
            </div>

            <div class="text-center">
              <button type="submit" mdbBtn color="default" class="waves-light" mdbWavesEffect value="Login" (click)="submit(loginForm)">
            </div>
          </form>
          <!-- Login form -->
        

          import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';
          import { FormGroup, FormControl, Validators } from '@angular/forms';

          @Component({
          selector: 'validation-reset',
          templateUrl: './validation-reset.component.html',
          styleUrls: ['./validation-reset.component.scss'],
          })
          export class ValidationResetComponent implements OnInit {
            loginForm: FormGroup;

            ngOnInit() {
              this.loginForm = new FormGroup({
                defaultFormEmail: new FormControl(null, Validators.required);
                defaultFormPass: new FormControl(null, [Validators.required, Validators.minLength(8)])
              });
            }

            get defaultFormEmail() { return this.loginForm.get('defaultFormEmail'); }
            get defaultFormPass() { return this.loginForm.get('defaultFormPass'); }

            submit(form: any) {
              form.reset();
            }
          }
        

Dynamic validation messages

In orderd to display validation messages under the validated element you need to add mdb-error and mdb-success components.

Sometimes one form control has several validators and it is neccessary to display different validation messages depending on user input. The following example shows how to do that:


          <form [formGroup]="validatingForm">
            <div class="md-form">
              <input mdbInput mdbValidate type="email" id="form8" class="form-control" formControlName="email">
              <label for="form8">Email validator</label>
              <mdb-error *ngIf="input.invalid && (input.dirty || input.touched)">
                <span *ngIf="input.errors.required">Email is required</span>
                <span *ngIf="input.errors.email">This email address is not valid</span>
              </mdb-error>
              <mdb-success *ngIf="input.valid && (input.dirty || input.touched)">Input valid</mdb-success>
            </div>
          </form>
        

          import { FormGroup, FormControl, Validators } from '@angular/forms';
          import { Component, OnInit } from '@angular/core';

          @Component({
          selector: 'validators-component-example',
          templateUrl: 'validators-example.html',
          })

          export class ValidatorsComponent implements OnInit {

            validatingForm: FormGroup;

            ngOnInit() {
              this.validatingForm = new FormGroup({
                email: new FormControl(null, [Validators.required, Validators.email])
              });
            }

            get input() { return this.validatingForm.get('max'); }

          }
        

Angular Validation - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of validation component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Validation:
// MDB Angular Pro
import { InputsModule, InputUtilitiesModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { InputsModule, InputUtilitiesModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'
// Angular Forms Modules
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

Components

MdbValidate

Selector: mdbValidate

Type: MdbValidateDirective

MdbError

Selector: mdb-error

Type: MdbErrorComponent

MdbSuccess

Selector: mdb-success

Type: MdbSuccessComponent


Inputs

mdbValidate

Name Type Default Description Example
validate boolean true Allow to toggle validation [validate]="false"
validateError boolean true Allow to toggle error validation [validateError]="false"
validateSuccess boolean true Allow to toggle success validation [validateSuccess]="false"