Sign in


Sign up


Angular Bootstrap inputs validation

Validation is very important, which is why we have prepared a number of validators at MDB, both Angular default validators and our own.


Reactive Forms - Angular default validators

For using Reactive Forms Validators it's needed to import:

To app.module.ts file add import { ReactiveFormsModule } from '@angular/forms';

To app.component.ts file add import { FormGroup, Validators, FormBuilder } from '@angular/forms';

minLength Validator

minLength validation attribute is set to 3.


<form [formGroup]="validatingForm">
    <div class="md-form">
        <input type="text" id="form2" class="form-control" data-error="wrong text" data-success="right text" formControlName="minlength">
        <label mdbInputDirective for="form2">minLength validator</label>
        <div *ngIf="validatingForm.controls['minlength'].touched">
            <div class="alert alert-danger" *ngIf="validatingForm.controls['minlength'].errors?.minlength">Custom Error</div>
        </div>
    </div>
</form>
    
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.


<form [formGroup]="validatingForm">
    <div class="md-form">
        <input type="text" id="form3" class="form-control" data-error="wrong text" data-success="right text" formControlName="maxlength">
        <label mdbInputDirective for="form3">maxLength validator</label>
        <div *ngIf="validatingForm.controls['maxlength'].touched">
            <div class="alert alert-danger" *ngIf="validatingForm.controls['maxlength'].errors?.maxlength">Custom Error</div>
        </div>
    </div>
</form>        
    
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.


<form [formGroup]="validatingForm">
    <div class="md-form">
        <input type="number" id="form4" class="form-control" data-error="wrong number" data-success="right number" formControlName="min">
        <label mdbInputDirective for="form4">min value validator</label>
        <div *ngIf="validatingForm.controls['min'].touched">
            <div class="alert alert-danger" *ngIf="validatingForm.controls['min'].errors?.min">Custom Error</div>
        </div>
    </div>
</form>
    
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.


<form [formGroup]="validatingForm">
    <div class="md-form">
        <input type="number" id="form5" class="form-control" data-error="wrong number" data-success="right number" formControlName="max">
        <label mdbInputDirective for="form5">max value validator</label>
        <div *ngIf="validatingForm.controls['max'].touched">
            <div class="alert alert-danger" *ngIf="validatingForm.controls['max'].errors?.max">Custom Error</div>
        </div>
    </div>
</form>
    
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


<form [formGroup]="validatingForm">
    <div class="md-form">
        <input type="email" id="form6" class="form-control" data-error="wrong email" data-success="right email" formControlName="email">
            <label mdbInputDirective for="form6">max value validator</label>
            <div *ngIf="validatingForm.controls['email'].touched">
                <div class="alert alert-danger" *ngIf="validatingForm.controls['email'].errors?.email">Custom Error</div>
            </div>
    </div>
</form>
    
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.


<form [formGroup]="validatingForm">
    <div class="md-form">
        <input type="text" id="form7" class="form-control" data-error="wrong text" data-success="right text" formControlName="pattern">
        <label mdbInputDirective for="form7">only letters (pattern) validator</label>
        <div *ngIf="validatingForm.controls['pattern'].touched">
            <div class="alert alert-danger" *ngIf="validatingForm.controls['pattern'].errors?.pattern">Custom Error</div>
        </div>
    </div>
</form>
    
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


<form [formGroup]="validatingForm">
    <div class="md-form">
        <input mdbInputDirective type="text" id="form1" class="form-control" data-error="Something went wrong..." data-success="Everything is okay!" formControlName="required">
        <label for="form1">Required validator</label>
        <div *ngIf="validatingForm.controls['required'].touched">
            <div class="alert alert-danger" *ngIf="validatingForm.controls['required'].errors?.required">Custom Error</div>
        </div>
    </div>
</form>
    
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],
    });
                
    }
}  
    

MDB default validatons

In MDB we're providing few basic validation functions ready to use by users.

For use MDB default validations, add mdbInputDirective directive to each input field, which is to be validated.

Email validation



<form>
    <div class="md-form">
        <input type="email" id="form8" class="form-control" data-error="wrong email" data-success="right email" mdbInputDirective>
        <label for="form8">MDB email validation</label>
    </div>
</form>
        

Password validation



<form>
    <div class="md-form">
        <input type="password" id="form9" class="form-control" data-error="wrong password" data-success="right password" mdbInputDirective>
        <label for="form9">MDB password validation</label>
    </div>
</form>
        

Text validation



<form>
    <div class="md-form">
        <input type="text" id="form10" class="form-control" data-error="wrong text" data-success="right text" mdbInputDirective>
        <label for="form10">MDB text validation</label>
    </div>
</form>
        

MDB telephone number validation



<form>
    <div class="md-form">
        <input type="tel" id="form11" class="form-control" data-error="wrong tel" data-success="right tel" mdbInputDirective>
        <label for="form11">MDB telephone number validate</label>
    </div>
</form>
        

MDB number validation



<form>
    <div class="md-form">
        <input type="number" id="form12" class="form-control" data-error="wrong number" data-success="right number" mdbInputDirective>
        <label  for="form12">MDB telephone number validate</label>
    </div>
</form>
        

Submit validation

Submit validation works only, when <input type="submit"> is placed between <form></form> tags.

Submit validation marks every input, which is filled incorretly.


<form>
    <div class="md-form">
        <input type="password" id="form13" class="form-control" data-error="wrong password" data-success="right password" mdbInputDirective>
        <label  for="form13">MDB password validate</label>
    </div>
    
    <div class="md-form">
        <input type="email" id="form14" class="form-control" data-error="wrong mail" data-success="right mail" mdbInputDirective>
        <label  for="form14">MDB email validate</label>
    </div>
            
    <div class="md-form">
        <input type="number" id="form15" class="form-control" data-error="wrong number" data-success="right number" mdbInputDirective>
        <label  for="form15">MDB number validate</label>
    </div>
    
    <div class="md-form">
        <input type="tel" id="form16" class="form-control" data-error="wrong telephone number" data-success="right telephone number" mdbInputDirective>
        <label  for="form16">MDB telephone number validate</label>
    </div>
    
    <input type="submit" class="btn btn-primary" value="submit" mdbInputDirective>
</form>
        

MDB custom RegEx validatons

For advanced validations, we've prepared customRegex input, which allows users to place their custom RegEx without editing MDB source files.


<form>
    <div class="md-form">
        <input type="text" id="form17" class="form-control"  customRegex="^[a-zA-Z0-9]+$" data-error="wrong text" data-success="right text" mdbInputDirective>
        <label for="form17">Custom RegEx validation</label>
    </div>
</form>