5 Form Validation Module/Directives for AngularJS / AngularJS 2

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

Angular form validation

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

bootstrap angular validation

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:

 

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.

ng2 validation manager

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.