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>