डाउनलोड पी.डी.एफ. ई-बुक्स
AJS - Form Validation

Form Validation ये form elements(input, select, textarea) के लिए होता है | AngularJS में form को validate किया जाता है |

Without Validation Form

Example पर Form को validate नहीं किया गया है | ये एक Simple Form बनाया गया है |

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="AppController">

<form ng-submit="submit()">
<input type="text" placeholder="Enter name"/><br/><br/>
<input type="text" placeholder="Enter Email"/><br/><br/>
<input type="submit">
</form>
{{onsubmit}}
<script>
var myapp = angular.module('app', []);
myapp.controller('AppController', function($scope) {
	$scope.submit = function(){
		$scope.onsubmit = 'Form is Submitted.';
	};
});
</script>
</body>
</html>
Output :
Click here to Get Output

AngularJS में Form क validate करने के लिए HTML5 के कुछ attributes का इस्तेमाल किया जाता है |

ऊपर के example को निचे example पर validate किया गया है |

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
</head>
<body>

<form ng-app="app" ng-controller="ctrl" name="myForm">

Name : <input type="text" name="name" ng-model="name" required>
<span ng-show="myForm.name.$error.required">name is required.</span>
</span><br /><br />

Email : <input type="email" name="email" ng-model="email" required>
<span ng-show="myForm.email.$error.required">email is required.</span>
<span ng-show="myForm.email.$error.email">invalid email address.</span>
<br /><br />

<input type="submit" ng-disabled="myForm.name.$dirty && myForm.name.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid">

</form>

<script>
var myapp = angular.module('app', []);
myapp.controller('ctrl', function($scope) {
    $scope.name = 'UD';
    $scope.email = 'ud@gmail.com';
});
</script>

</body>
</html>
Output :
Click here to Get Output

Form Validation Directives in AngularJS

DirectivesDescription
ng-minlengthvalue पर minimum length दी जाती है |
ng-maxlengthvalue पर minimum length दी जाती है |
ng-patternvalue पर regular expression दिया जाता है |
ng-requiredvalue पर true दिया जाता है तो उस input field पर value देना अनिवार्य होता है |

 

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
</head>
<body>

<form ng-app="" name="myForm">

Name : <input type="text" name="name" ng-minlength="4" ng-maxlength="15" ng-model="name">
<span ng-show="myForm.name.$error.minlength">minimum 4 characters allowed.</span>
<span ng-show="myForm.name.$error.maxlength">maximum 15 characters allowed.</span>
</span><br /><br />

Email : <input type="email" name="email"  ng-minlength="6" ng-maxlength="30" ng-model="email" ng-required="true">
<span ng-show="myForm.email.$error.required">email is required.</span>
<span ng-show="myForm.email.$error.email">invalid email address.</span>
<span ng-show="myForm.email.$error.minlength">minimum 6 characters allowed.</span>
<span ng-show="myForm.email.$error.maxlength">maximum 30 characters allowed.</span>
<br /><br />

Mobile Number : <input type="text" name="number" ng-pattern="[0-9]" ng-minlength="10" ng-maxlength="10" ng-model="number">
<span ng-show="myForm.number.$error.pattern">only numeric values allowed</span>
<span ng-show="myForm.number.$error.minlength">invalid mobile number.</span>
<span ng-show="myForm.number.$error.maxlength">maximum 10 digits allowed.</span>
<br /><br />

<input type="submit">

</form>

</body>
</html>
Output :
Click here to Get Output

AngularJs Form States

StatesDescription
$dirtyये $pristine के विरुद्ध होता है | अगर field पर कुछ change किया जाता है तो true return करता है |
$invalidये $valid के विरुद्ध होता है | अगर field का data valid होता है तो true return करता है |
$errorये errors का object होता है | इस object में सभी validation names या attributes होते है |
$pristineये $dirty के विरुद्ध होता है | अगर field पर कुछ change नहीं किया जाता है तो true return करता है |
$touchedfield पर touch करके blur करने पर true return होता है |
$untouchedfield पर touch न करने पर true return होता है |
$validये $invalid के विरुद्ध होता है | अगर field का data invalid होता है तो true return करता है |

 

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<form ng-app="" name="myForm">

Name : <input type="text" name="name" ng-minlength="4" ng-maxlength="15" ng-model="name" required>
<span ng-show="myForm.name.$error.required">name is reqiured.</span>
<span ng-show="myForm.name.$error.minlength">minimum 4 characters allowed.</span>
<span ng-show="myForm.name.$error.maxlength">maximum 15 characters allowed.</span>
</span><br /><br />

<input type="submit"><br /><br />

dirty state : {{myForm.name.$dirty}} <br />
invalid state : {{myForm.name.$invalid}} <br />
error state : {{myForm.name.$error}} <br />
pristine state : {{myForm.name.$pristine}} <br />
touched state : {{myForm.name.$touched}}<br />
untouched state : {{myForm.name.$untouched}}<br />
valid state : {{myForm.name.$valid}} <br />

</form>

</body>
</html>
Output :
Name : name is reqiured. minimum 4 characters allowed. maximum 15 characters allowed.



dirty state : {{myForm.name.$dirty}}
invalid state : {{myForm.name.$invalid}}
error state : {{myForm.name.$error}}
pristine state : {{myForm.name.$pristine}}
touched state : {{myForm.name.$touched}}
untouched state : {{myForm.name.$untouched}}
valid state : {{myForm.name.$valid}}