Validation is the one of important part of any library. In each library or Framework there will be different approach to do validation. Similarly there is some different way to do validation in AngularJs.
In AngularJs Form attribute play the main role in validation.
Now in below example we will see the demo example of doing validation of UserName and EmailId.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.user = 'chandradev';
$scope.email = 'chandradev@gmail.com';
});
</script>
</head>
<body>
<fieldset>
<legend><b>Validation Example</b></legend>
<form ng-app="myApp" ng-controller="MyController"
name="myForm" novalidate>
<p>
UserName:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">UserName is required.</span>
</span>
</p>
<p>
Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid Email ID.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
</fieldset>
</body>
</html>
Point to remember:
1. In the above example ng-show=”myForm.user.$dirty && myForm.user.$invalid” is used to display the invalid message if the user type invalid data or left blank.
2. If the user will leave blank field then ng-show directive will display the error message as given below.
<span ng-show="myForm.user.$error.required">UserName is required.</span>
3. For validation of emailid the given below code will do.
<span ng-show="myForm.email.$error.email">Invalid Email ID.</span>
Summary:
In this article we learnt that how to do basic validation in angularJs
Chandradev's Blog 