Objectives and outcomes

In this tutorial we are going to learn about how to handle form and validate them using angular-js. All forms uses input controls like input, select, button and text-area therefore we bind the data with these input controls using ng-model. AngularJs also provide client side form validation and also monitors the state of various input controls using $dirty, $error, $invalid, $touched etc. While validating form using angular-js we should provide the form tag with novalidate argument so that default browser validation does not occur.



HTML code:

<html>
<head>
<meta charset="utf-8">
<title>AngularJS forms</title>
<script src="angular-1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="formvalid">
<form name="example" novalidate>

<label for="username">username</label>
<input type="text" ng-model="username" name="username" required>
<span ng-show="example.username.$dirty && example.username.$invalid" style="color:red">
<span ng-show="example.username.$error.required">username is required</span>
</span>
<br/>

<label for="mobile">Mobile no.</label>
<input type="number" ng-model="mobile" name="mobile" minlength="10" maxlength="10" required>
<span style="color:red" ng-show="example.mobile.$dirty && example.mobile.$invalid">
<span ng-show="example.mobile.$error.required">mobile is required</span>
<span ng-show="((example.mobile.$error.minlength || example.mobile.$error.maxlength) && example.mobile.$dirty)">Mobile no should consist of 10 digits</span>
</span>
<br/>

<label for="email">Email</label>
<input type="email" name="email" ng-model="email" required>&nbsp;
<span style="color:red" ng-show="example.email.$dirty && example.email.$invalid">
<span ng-show="example.email.$error.required">Email is required</span>
<span ng-show="example.email.$error.email">Invalid email</span>
</span>
<br/>

<label for="password">Password</label>
<input type="password" ng-model="password" name="password" required minlength="6" maxlength="20"  ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/">
<span style="color:red;" ng-show="example.password.$dirty && example.password.$invalid">
<span ng-show="example.password.$error.required">Password required</span>
<span ng-show="((example.password.$error.minlength || example.password.$error.maxlength) && example.password.$dirty)">Password should be between 6 to 20 characters</span>
<span ng-show="example.password.$error.pattern">Password must contain one lowercase, one uppercase and on non-alpha character</span>
</span><br/>


<button type="submit" ng-click="reset()">Reset!</button>

<button type="submit" ng-disabled="!example.$valid" ng-click="submit()">Submit</button><br/>
</form>
</div>
</body>
</html>


Javascript:

<script>
angular.module("myapp",[]).controller("formvalid",function($scope)
{
$scope.reset = function()
{
$scope.username = "codeshot.in";
$scope.mobile = 9999999999;
$scope.email = "contact.codeshot@gmail.com";
$scope.password = "aA12345678";
}
$scope.reset();
});
</script>


  username is required
  mobile is required Mobile no should consist of 10 digits
  Email is required Invalid email
Password required Password should be between 6 to 20 characters Password must contain one lowercase, one uppercase and on non-alpha character




We have perform the validation using following parameters - (required,minlength,maxlength,ng-pattern,email). Also we have used $dirty which monitors the field which is currently touched, $invalid checks for the validity of application data and $error handles the case when an error occurs. The form submit button gets disabled when any of the form field is invalid