Form Validation in AngularJS
AngularJS provides client side validation.In this post, we are going to see the simple example of Form Validation with AngularJS.
In AngularJS form and input fields have certain properties which state keeps on changing either true or false.
$pristine - Value will be true if no fields/form are updated.
$dirty - Value will be true if any fields/form are updated.
In AngularJS form and input fields have certain properties which state keeps on changing either true or false.
$pristine - Value will be true if no fields/form are updated.$dirty - Value will be true if any fields/form are updated.
$valid - Value will be true if fields/form is valid.
$invalid - Value will be true if fields/form is not valid.
$submitted - Value will be true if the form is submitted.
$touched - Value will be true if fields are touched/blurred.
$untouched - Value will be true if fields are not touched/blurred.
Below is simple form validation example with 3 fields Name, Father's Name and Email .
Name- Name should be min 4 char and maximum 10 char.
Father's Name-Min 8 char.
Email - Proper email format.
$untouched - Value will be true if fields are not touched/blurred.
Below is simple form validation example with 3 fields Name, Father's Name and Email .
Name- Name should be min 4 char and maximum 10 char.
Father's Name-Min 8 char.
Email - Proper email format.
<!DOCTYPE html>
<html ng-app="formValidation">
<head>
<title>Angular Form Validation</title>
<h1>Form Validation</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-controller='AppCtrl as ctrl'>
<form ng-submit="ctrl.onSubmitForm()" name="regform" action="http://www.javainstance.com" novalidate>
<table>
<tr>
<td>Name:</td><td><input type="text" ng-model="ctrl.name" ng-minlength="4" ng-maxlength="10"></td></tr>
<tr>
<td>Father's Name:</td><td><input type="text" ng-model="ctrl.fname" ng-minlength="8"></td></tr>
<tr><td>Email:</td><td><input type="email" ng-model="ctrl.email" ></td></tr>
<tr><td><input type="submit" value="Submit" ng-disabled="regform.$invalid"></td></tr>
</table>
</form>
<script type="text/javascript">
angular.module('formValidation',[])
.controller('AppCtrl',function(){
var self = this;
self.onSubmitForm = function(){
alert("Form is about to submitted!");
}
});
</script>
</body>
</html>
Give your suggestion in comments.
If you like the post Share with your friends on social network.
To Do Application AngularJS
Form Validation in AngularJS
Reviewed by JavaInstance
on
1:38:00 AM
Rating:
Reviewed by JavaInstance
on
1:38:00 AM
Rating:
No comments: