Validation
Angular Bootstrap 5 Validation
Provide valuable, actionable feedback to your users with Angular form validation.
Basic example
Use mdbValidate directive to enable validation styles and
mdb-error and mdb-success components to display validation messages.
Import ReactiveFormsModule to enable reactive forms validation in Angular.
<form [formGroup]="validationForm">
<div class="row">
<div class="col-md-6">
<mdb-form-control>
<input
mdbValidate
mdbInput
type="text"
id="form1"
class="form-control"
formControlName="firstName"
required
/>
<label mdbLabel class="form-label" for="form1">First name</label>
<mdb-error
*ngIf="
firstName?.invalid && (firstName?.dirty || firstName?.touched)
"
>First name is required</mdb-error
>
<mdb-success
*ngIf="
firstName?.valid && (firstName?.dirty || firstName?.touched)
"
>Looks good!</mdb-success
>
</mdb-form-control>
</div>
<div class="col-md-6">
<mdb-form-control>
<input
mdbValidate
mdbInput
type="text"
id="form2"
class="form-control"
formControlName="lastName"
required
/>
<label mdbLabel class="form-label" for="form2">Last name</label>
<mdb-error *ngIf="lastName?.invalid && (lastName?.dirty || lastName?.touched)"
>Last name is required</mdb-error
>
<mdb-success *ngIf="lastName?.valid && (lastName?.dirty || lastName?.touched)"
>Looks good!</mdb-success
>
</mdb-form-control>
</div>
</div>
</form>
import { Component } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
validationForm: FormGroup;
constructor() {
this.validationForm = new FormGroup({
firstName: new FormControl(null, Validators.required),
lastName: new FormControl(null, Validators.required),
});
}
get firstName(): AbstractControl {
return this.validationForm.get('firstName')!;
}
get lastName(): AbstractControl {
return this.validationForm.get('lastName')!;
}
}
Supported elements
Validation styles are available for the following form controls and components:
-
<input>s and<textarea>s with.form-control(including up to one.form-controlin input groups) .form-checksmdb-select
<form [formGroup]="validationForm">
<div class="mb-3 pb-1">
<mdb-form-control>
<input
mdbValidate
mdbInput
type="text"
id="form1"
class="form-control"
formControlName="input"
required
/>
<label mdbLabel class="form-label" for="form1">Example label</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
>
</mdb-form-control>
</div>
<div class="mb-3 pb-1">
<mdb-form-control>
<textarea
mdbValidate
mdbInput
type="text"
id="form1"
class="form-control"
formControlName="textarea"
required
></textarea>
<label mdbLabel class="form-label" for="form1">Example label</label>
<mdb-error *ngIf="textarea?.invalid && (textarea?.dirty || textarea?.touched)"
>Input invalid</mdb-error
>
<mdb-success *ngIf="textarea?.valid && (textarea?.dirty || textarea?.touched)"
>Input valid</mdb-success
>
</mdb-form-control>
</div>
<div class="mb-3 pb-1">
<mdb-form-control>
<mdb-select mdbValidate [required]="true" formControlName="select">
<mdb-option *ngFor="let option of options" [value]="option.value"
>{{ option.label }}</mdb-option
>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
<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
>
</mdb-form-control>
</div>
<div class="form-check mt-5 mb-3 ms-2 pb-1">
<input
mdbValidate
mdbCheckbox
class="form-check-input"
type="checkbox"
value=""
id="flexCheckDefault"
formControlName="checkbox"
/>
<label class="form-check-label" for="flexCheckDefault"> Default checkbox </label>
<mdb-error *ngIf="checkbox?.invalid && (checkbox?.dirty || checkbox?.touched)"
>Input invalid</mdb-error
>
<mdb-success *ngIf="checkbox?.valid && (checkbox?.dirty || checkbox?.touched)"
>Input valid</mdb-success
>
</div>
</form>
import { Component } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
validationForm: FormGroup;
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
constructor() {
this.validationForm = new FormGroup({
input: new FormControl(null, Validators.required),
textarea: new FormControl(null, Validators.required),
select: new FormControl(null, Validators.required),
checkbox: new FormControl(null, Validators.requiredTrue),
});
}
get input(): AbstractControl {
return this.validationForm.get('input')!;
}
get textarea(): AbstractControl {
return this.validationForm.get('textarea')!;
}
get select(): AbstractControl {
return this.validationForm.get('select')!;
}
get checkbox(): AbstractControl {
return this.validationForm.get('checkbox')!;
}
}
On blur validation
<form [formGroup]="validationForm">
<div class="row">
<div class="col-md-6">
<mdb-form-control>
<input
mdbValidate
mdbInput
type="text"
id="form1"
class="form-control"
formControlName="firstName"
required
/>
<label mdbLabel class="form-label" for="form1">First name</label>
<mdb-error
*ngIf="
firstName?.invalid && (firstName?.dirty || firstName?.touched)
"
>First name is required</mdb-error
>
<mdb-success
*ngIf="
firstName?.valid && (firstName?.dirty || firstName?.touched)
"
>Looks good!</mdb-success
>
</mdb-form-control>
</div>
<div class="col-md-6">
<mdb-form-control>
<input
mdbValidate
mdbInput
type="text"
id="form2"
class="form-control"
formControlName="lastName"
required
/>
<label mdbLabel class="form-label" for="form2">Last name</label>
<mdb-error *ngIf="lastName?.invalid && (lastName?.dirty || lastName?.touched)"
>Last name is required</mdb-error
>
<mdb-success *ngIf="lastName?.valid && (lastName?.dirty || lastName?.touched)"
>Looks good!</mdb-success
>
</mdb-form-control>
</div>
</div>
</form>
import { Component } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
validationForm: FormGroup;
constructor() {
this.validationForm = new FormGroup({
firstName: new FormControl(null, Validators.required),
lastName: new FormControl(null, Validators.required),
});
}
get firstName(): AbstractControl {
return this.validationForm.get('firstName')!;
}
get lastName(): AbstractControl {
return this.validationForm.get('lastName')!;
}
}
On submit validation
<form [formGroup]="validationForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-md-6">
<mdb-form-control>
<input
mdbValidate
mdbInput
type="text"
id="form1"
class="form-control"
formControlName="firstName"
required
/>
<label mdbLabel class="form-label" for="form1">First name</label>
<mdb-error
*ngIf="
firstName?.invalid && (firstName?.dirty || firstName?.touched)
"
>First name is required</mdb-error
>
<mdb-success
*ngIf="
firstName?.valid && (firstName?.dirty || firstName?.touched)
"
>Looks good!</mdb-success
>
</mdb-form-control>
</div>
<div class="col-md-6">
<mdb-form-control>
<input
mdbValidate
mdbInput
type="text"
id="form2"
class="form-control"
formControlName="lastName"
required
/>
<label mdbLabel class="form-label" for="form2">Last name</label>
<mdb-error *ngIf="lastName?.invalid && (lastName?.dirty || lastName?.touched)"
>Last name is required</mdb-error
>
<mdb-success *ngIf="lastName?.valid && (lastName?.dirty || lastName?.touched)"
>Looks good!</mdb-success
>
</mdb-form-control>
</div>
</div>
<button type="submit" class="btn btn-primary mt-4">Submit</button>
</form>
import { Component } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
validationForm: FormGroup;
constructor() {
this.validationForm = new FormGroup({
firstName: new FormControl(null, { validators: Validators.required, updateOn: 'submit' }),
lastName: new FormControl(null, { validators: Validators.required, updateOn: 'submit' }),
});
}
get firstName(): AbstractControl {
return this.validationForm.get('firstName')!;
}
get lastName(): AbstractControl {
return this.validationForm.get('lastName')!;
}
onSubmit(): void {
this.validationForm.markAllAsTouched();
}
}
Validation - API
Import
import { MdbValidationModule } from 'mdb-angular-ui-kit/validation';
import { ReactiveFormsModule } from '@angular/forms';
…
@NgModule ({
...
imports: [MdbValidationModule, ReactiveFormsModule],
...
})
Inputs
mdbValidate
| Name | Type | Default | Description |
|---|---|---|---|
validateError
|
boolean | true |
Enables error validation. |
validateSuccess
|
boolean | true |
Enables success validation. |