AngularJS
Validation
AngularJS support client-side form
validation. AngularJS inspect the state
of the form and input fields and inform you about the current state. It also
contains information about touched, modified etc.
It provides the facility to create your
own validation method or you can use standard HTML5 attributes to validate
input.
Form State and Input State
Following
are the states of Input fields:
$untouched:
- This properties notify that field
has not been touched yet
$touched:
- This properties notify that field
has been touched
$pristine:
- This property notifies that field
has not been modified yet
$dirty:
- This property notifies that field
has been modified
$invalid:
- This properties notify that field
content is not valid
$valid:
- This property notifies that field
content is valid
Above are the input field properties
and it will be eight true or false.
Following are the states of Forms:
$pristine
:- This properties notify that, No
fields have been modified yet
$dirty
:-
This properties notify that one or more have been modified
$invalid
:- This properties notify that the form
content is not valid
$valid
:-This properties notify that the form
content is valid
$submitted
:- This properties notify that the form
is submitted
Above are the Forms properties and it
will be eight true or false.
AngularJS directives for form
validation
Here is a list of AngularJS directive
which can be apply on a input field to validate it's value.
<input type="text" ng-model="{ string }" [name="{ string }"] [ng-required="{ boolean }"] [ng-minlength="{ number }"] [ng-maxlength="{ number }"] [ng-pattern="{ string }"] [ng-change="{ string }"]> </input>
<div ng-app="myApp" ng-controller="Employee1Controller">
<h2>Validation Example</h2>
<form name="myForm" novalidate>
<p>
Name:<br>
<input type="text" name="username" ng-model="username" required>
<span style="color:red" ng-show="myForm.username.$dirty && myForm.username.$invalid">
<span ng-show="myForm.username.$error.required">Name is required.</span>
</span>
</p>
<p>
Email:<br>
<input type="email" name="useremail" ng-model="useremail" required>
<span style="color:red" ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
<span ng-show="myForm.useremail.$error.required">Email is required.</span>
<span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
</span>
</p>
<p>
Address:<br>
<input type="text" name="useraddress" ng-model="useraddress" required>
<span style="color:red" ng-show="myForm.useraddress.$dirty && myForm.useraddress.$invalid">
<span ng-show="myForm.useraddress.$error.required">Address is required.</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.username.$dirty && myForm.username.$invalid ||
myForm.useremail.$dirty && myForm.useremail.$invalid ||myForm.useraddress.$dirty && myForm.useraddress.$invalid">
</p>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('Employee1Controller', function ($scope) {
$scope.username = 'alok singh';
$scope.useremail = 'salok0282@gmail.com';
$scope.useraddress = 'Delhi NCR';
});
</script>
Validation Example
Custom
Validation
You can create your own validation
function in AngularJS. While creating your own validation function you need to
add a new directive in your application and do validation inside a function
with certain specified arguments.
<div ng-app="myApp">
<form name="myForm">
<input name="name" ng-model="name" required my-directive>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.name.$valid}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, mCtrl) {
function myValidation(value) {
if (value.indexOf("singh") > -1) {
mCtrl.$setValidity('charSingh', true);
} else {
mCtrl.$setValidity('charSingh', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
Complete validation example
No comments:
Post a comment