One of the coolest features of AngularJS is client-side validation. There are so many form directives available in AngularJS. We will talk about some of them here, we will also explain custom validation. Using it you can create your own validations.
Client-side form validation can be handled very easily using AngularJS without adding so much extra effort. To use form validation, first ensure that the form has a "name" associated with it as in the following:
<Form name="Form"> </Form>
Now I am showing you various types of validations in AngularJS.
Required
To validate that a form input is filled in, to use this type of validation; just add "required" to the input field.
Example
<form name="Form">
<input type="text" required />
Minimum Length
To validate that an input field is at least a number of characters. To use this type of validation just add the "ng-minlength" directive of AngularJS inside the input field.
Syntax: ng-minlength="{number}"
Example
<form name="Form">
<input type="text" ng-minlength=5 />
</form>
Maximum Length
To validate that an input field is less than or equal to the number of characters. To use this type of validation just add the "ng-maxlength" directive of AngularJS inside the input field.
Syntax: ng-maxlength="{number}"
Example
<form name="Form">
<input type="text" ng-maxlength=50 />
</form>
Email
To validate an email address of an input field, just set the input type to "Email".
Example
<form name="Form">
<input type="Email" name="Email" ng-model="user.Email" />
</form>
Number
To validate that an input field has a number, just set the input type to "number".
Example
<form name="Form">
<input type="number" name="number" ng-model="user.Age" />
</form>
Pattern Matching
This type of validation is based on regular expression pattern expression and also called regular expression validation. This validation checks that the value of an input field matches a specific regular expression pattern. For this we use the "ng-pattern" directive of AngularJS.
Syntax: ng-pattern="/PATTERN/"
Example
<form name="Form">
<input type="text" ng-pattern="/a-zA-Z/" />
<input type="text" ng-pattern="/0-9/" />
<input type="text" ng-pattern="/a-zA-Z0-9/" />
</form>
In the preceding example:
1st input field will only use a-z and A-Z characters,
2nd input field will only use 0-9 characters,
3rd input field will only use a-z,A-Z and 0-9 characters.
URL
To validate that an input field has an URL, set the input type to "URL".
<form name="Form">
<input type="url" name="homepage" ng-model="user.google_url" />
</form>
Custom Validations
Using AngularJS we can add or create our own validation very easily or quickly by using directives of AngularJS. Now I am showing you a simple example of custom validation.
Step 1: Create a Java-Script file in which custom validation is defined.
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.test = 'this is wrong';
});
app.directive('regexValidate', function () {
return {
restrict: 'A',// restrict to an attribute type.
Avi AlgalyPosted Oct 29, 2015, 4:41 PM
very nice but there's much more to it.
Mukesh KumarPosted Oct 18, 2015, 1:46 AM
Good Job Sir
Santosh GautamPosted Feb 5, 2014, 4:54 AM
Nice briefing about validation in angularJS