The AngularJS directives for form validation
As AngularJS is becoming more and more popular, its third party components that you may use in your AngularJS or Angular2 projects are available in numbers and variety.
I have been sharing different components developed by talented developers and in this post, I am going to share form validation modules/directives for Angular/Angular 2 projects. You may see the demos along with download link and a link to the developer’s page with each.
The ngx-validators for Angular 2+
By using the ngx-validators library, you may validate a variety of input fields for the Angular2+ projects. The validation of form fields include:
- Password validation where certain conditions can be specified. For example, the password must contain a digit, at least a capital letter, a special character etc.
- Email format validation
- Phone number format validation
- Credit card validation
- And Universal fields. These include but not limited to the minimum number of characters in a field. You may also use it for a maximum number of characters and even a range between two numbers.
- It also enables creating numeric fields with minimum, maximum or range of numbers to be entered in the form field.
Demo Source
How to install the ngx-validators?
You may install the ngx-validators via npm:
npm install ngx-validators –save
For usage, visit the source page.
bootstrap-angular-validation
If you are using the Bootstrap framework with Angular then bootstrap-angular-validation can be a good solution for the form validation. It uses the Bootstrap form validation classes, so you have to include the Bootstrap CSS.
Demo Source
Compatibility:
- Angular 1.3.0 (minimum). For the previous version, use the 0.0.1 version of this library.
- It will not work with IE 8 and less
- No jQuery is required
Installation:
You may install the bootstrap-angular-validation via Bower:
bower install bootstrap-angular-validation –save
Include the JS file of this library:
<script src="bower_components/bootstrap-angular-validation/dist/bootstrap-angular-validation-all.min.js"></script>
Read more about configuration and using in your web project by following the source link.
The ng-bootstrap-form-validation module
The ng-bootstrap-form-validation is an Angular module for the form validation which is data driven. As the name suggests, it works with the Bootstrap framework and uses a few classes like has-error, has-success etc.
As the form is submitted by the user, the given validation message appears for the specified fields. The module will iterate over the form fields and display the error messages when the input field is dirty, touched or has error.
Demo Source
You may install the module by npm:
npm install ng-bootstrap-form-validation –save
You may learn more about usage and configuration by visiting the source page.
Laravel Validation method – ng2-validation-manager library
The ng2-validation-manager is the form validation library for Angular 2 projects. This library is based on Laravel validation method.
Demo Source
By using this library, you may display the customized error messages and It has over 20 validation rules. The library is expandable and easy to use.
Installation via npm:
npm i ng2-validation-manager –save
More about the library at the source page.
The angular-validation for client side validation
The angular-validation is a solution for AngularJS 1 that has built-in validation rules for the required fields, URL fields, email, numbers and max and minimum fields. You may integrate this to the Bootstrap based project as well.
Demo Source
Install via Bower or npm:
npm install angular-validation
bower install angular-validation
For more, please visit the developer page.