Today, lets know how to create a simple validation form using Angular JS.
As usual, I will elaborate it using an example.
validation.html:-
app.js:-
var mainApp = angular.module("mainApp", []);
validation.js:-
mainApp.controller('studentController', function($scope) {
$scope.reset = function(){
$scope.firstName = "Anik";
$scope.lastName = "Acharjee";
$scope.email = "anikacharjee@gmail.com";
$scope.mob = "9958644437";
}
$scope.reset();
});
Screenshots:-
Explanation:-
As usual, I will elaborate it using an example.
validation.html:-
<html>
<head>
<title>Angular JS Validation Form</title>
<script src="angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Validation Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>Enter first name:</td><td><input name="firstname" type="text" ng-model="firstName" required>
<span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
<span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
</span>
</td></tr>
<tr><td>Enter last name: </td><td><input name="lastname" type="text" ng-model="lastName" required>
<span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
<span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
</span>
</td></tr>
<tr><td>Enter Mob. No: </td><td><input name="mob" type="text" ng-pattern="/^\d{0,10}(\.\d{1,9})?$/" ng-model="mob" required ng-maxlength="10">
<span style="color:red" ng-show="studentForm.mob.$dirty && studentForm.mob.$invalid">
<span ng-show="studentForm.mob.$error.required">Mobile No. is required.</span>
</span>
</td></tr>
<tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
<span ng-show="studentForm.email.$error.required">Email is required.</span>
<span ng-show="studentForm.email.$error.email">Invalid email address.</span>
</span>
</td></tr>
<tr><td><button ng-click="reset()">Reset</button></td><td><button
ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||
studentForm.lastname.$dirty && studentForm.lastname.$invalid ||
studentForm.mob.$dirty && studentForm.mob.$invalid"
studentForm.email.$dirty && studentForm.email.$invalid"
ng-click="submit()">Submit</button></td></tr>
</table>
</form>
</div>
<script src="app.js"> </script>
<script src="validation.js"> </script>
</script>
</body>
</html>
app.js:-
var mainApp = angular.module("mainApp", []);
validation.js:-
mainApp.controller('studentController', function($scope) {
$scope.reset = function(){
$scope.firstName = "Anik";
$scope.lastName = "Acharjee";
$scope.email = "anikacharjee@gmail.com";
$scope.mob = "9958644437";
}
$scope.reset();
});
Screenshots:-
Explanation:-
In the above example, "ng-click" is used to handle Angular JS on button/link click. "$dirty" and "$invalid" flags are used to do the validations in seamless way. "novalidate" is used with a form declaration to disable any browser specific validation. "ng-show" is used to display any errors in the page. "ng-pattern" directive is used to check the mobile number pattern.
Three files has been used :- "app.js", which is an Application Module, used to initialize an application with controller(s). "validation.js", which is a Controller Module, used to define the controller and "validation.html", which is a simple html file, where all the above js files are included along with the html code of lines.
In "Enter Mob. No." field, we can enter only 10 digits(not more than that). We cannot enter letters also in that field. In "Email" field, we can only enter a VALID email id.
No comments:
Post a Comment