Angular Bootstrap inputs validation

Validation is very important, which is why we have prepared a number of validators at MDB.

Reactive Forms - Angular default validators

minLength Validator

minLength validation attribute is set to 3.

minLength validator



    
        
        minLength validator


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

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

    validatingForm: FormGroup;
    constructor(private fb: FormBuilder) {
        this.validatingForm = fb.group({
            'minlength': [null, Validators.minLength(3)],
        });
    }
}

maxLength Validator

maxLength validation attribute is set to 5.

maxLength validator



    
        
        maxLength validator


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

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

export class ValidatorsComponent {

    validatingForm: FormGroup;
    constructor(private fb: FormBuilder) {
    this.validatingForm = fb.group({
        'maxlength': [null, Validators.maxLength(5)],
        });
    }
}

Min value Validator

Min value is set to 10.

min value validator



    
        
        min value validator


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

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

export class ValidatorsComponent {

    validatingForm: FormGroup;
    constructor(private fb: FormBuilder) {
    this.validatingForm = fb.group({
        'min': [null, Validators.min(10)],
        });
    }
}

Max value Validator

Max value is set to 10.

max value validator



    
        
        max value validator


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

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

export class ValidatorsComponent {

    validatingForm: FormGroup;
    constructor(private fb: FormBuilder) {
    this.validatingForm = fb.group({
        'max': [null, Validators.max(10)],
        });
    }
}

Email Validator

email validator



    
        
            max value validator


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

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

export class ValidatorsComponent {

    validatingForm: FormGroup;
    constructor(private fb: FormBuilder) {
    this.validatingForm = fb.group({
        'email': [null, Validators.email],
        });
    }
}

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.

pattern validator



    
        
        only letters (pattern) validator


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

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

export class ValidatorsComponent {

    validatingForm: FormGroup;
    constructor(private fb: FormBuilder) {
    this.validatingForm = fb.group({
        pattern': [null, Validators.pattern(/A-Za-z/)],
        });
    }
}

Required Validator

Required validator



    
        
        Required validator


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

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

    validatingForm: FormGroup;
    constructor(private fb: FormBuilder) {
    this.validatingForm = fb.group({
        'required': [null, Validators.required],
    });
    }
}

Resetting a validation status




  Sign in

  
    
    
    Your email
  

  
    
    
    Your password


import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';
import { FormBuilder, FormGroup, 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;
    constructor(private fb: FormBuilder, private _el: ElementRef, private _r: Renderer2) {
        this.loginForm = fb.group({
            defaultFormEmail: ['', Validators.required],
            defaultFormPass: ['', [Validators.required, Validators.minLength(8)]]
        });
    }
    submit(form: any) {
        const success = this._el.nativeElement.querySelectorAll('.counter-success');
        const danger = this._el.nativeElement.querySelectorAll('.counter-danger');
        const textSuccess = this._el.nativeElement.querySelectorAll('.text-success');
        const textDanger = this._el.nativeElement.querySelectorAll('.text-danger');
        success.forEach((element: any) => {
            this._r.removeClass(element, 'counter-success');
        });
        danger.forEach((element: any) => {
            this._r.removeClass(element, 'counter-danger');
        });
        textSuccess.forEach((element: any) => {
            this._r.setStyle(element, 'visibility', 'hidden');
        });
        textDanger.forEach((element: any) => {
            this._r.setStyle(element, 'visibility', 'hidden');
        });
        form.reset();
    }
}

Custom validation messages

data-error, data-success provides space to enter your's custom error or success message.

Use can now use [errorMessage] and [successMessage] inputs to add custom messages as strings or to pass variables defined in your typescript file. Those inputs will only work when data-error and data-success attributes are not available.

If you do not want to use the validation, use [mdbValidate]="false" on the input element, which should not display the validation status. Use [validateSuccess]="false" or [validateError]="false" to disable only one type of message.

Type your email

Type your password



    
      
      
      Type your e-mail
    
  
    
      
      
      Type your password
    

    
        
        Turn off validation
      

      
        
        Turn off success validation
      

      
        
        Turn off error validation
      

      
        
        Custom validation messages


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

@Component({
  selector: 'error-success-message',
  templateUrl: './error-success-message.component.html',
  styleUrls: ['./error-success-message.component.scss'],
})
export class ErrorSuccessMessageComponent {
  emailFormEx: FormControl;
  passwordFormEx: FormControl;
  noValidation: FormControl;
  noSuccessValidation: FormControl;
  noErrorValidation: FormControl;
  customMessages: FormControl;
  errorMessage = 'Custom error message';

  constructor() {
    this.emailFormEx = new FormControl('', Validators.email);
    this.passwordFormEx = new FormControl('', Validators.required);
    this.noValidation = new FormControl('', Validators.required);
    this.noSuccessValidation = new FormControl('', Validators.required);
    this.noErrorValidation = new FormControl('', Validators.required);
    this.customMessages = new FormControl('', Validators.required);
  }
}

API Reference:

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, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'

// MDB Angular Free
import { InputsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'

// Angular Forms Modules
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

Import example Modules list