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
.
Reactive forms default validators
minLength Validator
minLength validation attribute is set to 3.
maxLength Validator
maxLength validation attribute is set to 5.
Min value Validator
Min value is set to 10.
Max value Validator
Max value is set to 10.
Email Validator
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.
Required Validator
Update on submit
Update on blur
Template-driven forms default validators
minLength Validator
minLength validation attribute is set to 3.
maxLength Validator
maxLength validation attribute is set to 5.
Min value Validator
Min value is set to 10.
Max value Validator
Max value is set to 10.
Email Validator
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.
Required Validator
Update on submit
Update on blur
Validating other components
You can use the mdbValidate
directive to validate other form components as well.
Resetting a validation status
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:
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:
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" |