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

Form में AngularJS State पर CSS Classes की मदद से form और उसके fields को validate किया जाता है }

निचे कुछ AngularJS CSS Classes दिए गए है |


CSS ClassesDescription
ng-dirtyये ng-pristine class के विरुद्ध होता है | field पर कुछ भी change किया जाता है तब ये class set होता है |
ng-invalidये $valid के विरुद्ध होता है | अगर field का data valid होता है तब ये class set होता है |
ng-pristineये ng-dirty class के विरुद्ध होता है | field पर कुछ भी change नहीं किया जाता है तब ये class set होता है |
ng-touchedfield पर touch करके blur करने पर ये class set होता है |
ng-untouchedfield पर touch न करने पर ये class set होता है |
ng-validये $invalid के विरुद्ध होता है | अगर field का data invalid होता है तब ये class set होता है |

 

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
input.ng-invalid {
    background-color:red;
}
input.ng-valid {
    background-color:green;
}
input.ng-touched {
    background-color:yellow;
}
input.ng-pristine {
	background-color:black;
}
</style>

</head>
<body>

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

email : <input type="email" name="email" ng-model="email" ng-minlength="6" ng-maxlength="30" required />
<span ng-show="myForm.email.$touched">touched<br /></span>
<span ng-show="myForm.email.$pristine">pristine<br /></span>
<span ng-show="myForm.email.$error.required || 
myForm.email.$error.email || 
myForm.email.$error.minlength || 
myForm.email.$error.maxlength">invalid(required | invalid email | minlength:6 | maxlength:30)<br /></span>
<span ng-show="myForm.email.$valid">valid<br /></span>
</form>

</body>
</html>
Output :
email : touched
pristine
invalid(required | invalid email | minlength:6 | maxlength:30)
valid