Angular Bootstrap Validation

Angular Validation - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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 for a specific form control, add the mdbValidate directive to it.

The mdb-error and mdb-success components allow us 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 } from '@angular/core';

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

              constructor() {
                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 } from '@angular/core';

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

            constructor() {
              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 {
            validatingForm: FormGroup;

            constructor() {
              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 } from '@angular/core';

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

            constructor() {
              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 } from '@angular/core';

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

            constructor() {
              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 } from '@angular/core';

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

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

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

Pattern Validator

Pattern Validator should contain a RegEx. With it, the pattern is able to validate using regular expressions. In this example, RegEx allows us to put only English letters into the 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 } from '@angular/core';

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

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

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

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 } from '@angular/core';

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

            constructor() {
              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="input"
              />
              <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>
            <button type="submit" mdbBtn color="primary" (click)="onSubmit()">Submit form</button>
          </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 {
            validatingForm: FormGroup;

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

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

            onSubmit() {
              this.validatingForm.controls.input?.markAsTouched();
            }
          }

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 } from '@angular/core';

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

            constructor() {
              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 contain RegEx. With it, the pattern is able to validate using regular expressions. In this example, RegEx allows us to put only English letters into the 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)]="inputControl" #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>
              <button type="submit" mdbBtn color="primary" (click)="input?.control.markAsTouched()">Submit form</button>
            </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">
                          <input mdbValidate formControlName="autocomplete" type="text" class="completer-input form-control mdb-autocomplete mb-0"
                                [mdbAutoCompleter]="auto"
                                placeholder="Choose your color">
                          <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
                            <mdb-option *ngFor="let option of results | async" [value]="option">
                              {{option}}
                            </mdb-option>
                          </mdb-auto-completer>
                          <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 } from '@angular/core';
              import { Observable } from 'rxjs';
              import { startWith, map } from 'rxjs/operators';
              import { IMyOptions } from 'ng-uikit-pro-standard';

              @Component({
                selector: 'validators-component-example',
                templateUrl: 'validators-example.html',
              })
              export class ValidatorsComponent {
                results: Observable<string[]>;

                data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];

                registerForm: FormGroup;

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

                myDatePickerOptions: IMyOptions = {
                  // Your options
                };

                constructor() {
                  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)
                  });

                  this.results = this.registerForm.controls.autocomplete.valueChanges
                  .pipe(
                    startWith(''),
                    map((value: string) => this.filter(value))
                  );
                }

                filter(value: string): string[] {
                  const filterValue = value.toLowerCase();
                  return this.data.filter((item: any) => item.toLowerCase().includes(filterValue));
                }

                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="fas 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="fas 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 } 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 {
              loginForm: FormGroup;

              constructor() {
                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 order to display validation messages under the validated element, you need to add the mdb-error and mdb-success components.

Sometimes one form control has several validators and it is necessary to display different validation messages depending on the user input?. The following example demonstrates 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 } from '@angular/core';

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

              constructor() {
                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:
        
            
          import { InputsModule, InputUtilitiesModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard';
          import { FormsModule, ReactiveFormsModule } from '@angular/forms';
        
        
    
        
            
          import { InputsModule, InputUtilitiesModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md';
          import { FormsModule, ReactiveFormsModule } from '@angular/forms';
Import example Modules list

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"

Angular Validation - examples & customization

File upload validation

        
            
            <form [formGroup]="validationForm">
              <div class="file-field md-form">
                <div mdbBtn color="primary" size="sm" class="waves-light" mdbWavesEffect>
                  <span>Choose file</span>
                  <input type="file" mdbFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
                </div>
                <div class="file-path-wrapper">
                  <input class="file-path" type="text" placeholder="Upload your file" [value]="showFiles()" formControlName="file">
                </div>
                <mdb-error *ngIf="file.invalid && (file.dirty || file.touched)">Input invalid</mdb-error>
                <mdb-success *ngIf="file.valid && (file.dirty || file.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 {
              validationForm: FormGroup;
              formData: FormData;
              files: UploadFile[];
              uploadInput: EventEmitter<UploadInput>;
              humanizeBytes: Function;
              dragOver: boolean;

              constructor() {
                this.files = [];
                this.uploadInput = new EventEmitter<UploadInput>();
                this.humanizeBytes = humanizeBytes;

                this.validationForm = new FormGroup({
                  file: new FormControl('', Validators.required)
                });
              }

              showFiles() {
                let files = '';
                for (let i = 0; i < this.files.length; i ++) {
                  files += this.files[i].name;
                  if (!(this.files.length - 1 === i)) {
                    files += ',';
                  }
                }
                return files;
              }

              startUpload(): void {
                const event: UploadInput = {
                  type: 'uploadAll',
                  url: 'your-path-to-backend-endpoint',
                  method: 'POST',
                  data: { foo: 'bar' },
                };
                this.files = [];
                this.uploadInput.emit(event);
              }

              cancelUpload(id: string): void {
                this.uploadInput.emit({ type: 'cancel', id: id });
              }

              onUploadOutput(output: UploadOutput | any): void {
                if (output.type === 'allAddedToQueue') {
                } else if (output.type === 'addedToQueue') {
                  this.files.push(output.file); // add file to array when added
                } else if (output.type === 'uploading') {
                  // update current data in files array for uploading file
                  const index = this.files.findIndex(file => file.id === output.file.id);
                  this.files[index] = output.file;
                } else if (output.type === 'removed') {
                  // remove file from array when removed
                  this.files = this.files.filter((file: UploadFile) => file !== output.file);
                } else if (output.type === 'dragOver') {
                  this.dragOver = true;
                } else if (output.type === 'dragOut') {
                } else if (output.type === 'drop') {
                  this.dragOver = false;
                }
                this.file.setValue(this.showFiles());
              }

              get file() { return this.validationForm.get('file'); }
            }