Validations is ensures the data submitted by the user is in correct and expected format. Validations can be done both Client-side using Javascript and Server-side using server side coding. AngularJS provides us with client-side validations option. AngularJS manages the state of the HTML elements on a web form, using which we can identity if the state of a control meets our validation requirements.
AngularJS updates the state of our web form and its elements automatically.
Form validations are as below:
$pristine |
Indicates if the form is in pristine state. If any fields are modified, this will be false. |
$dirty |
Indicates if any element of the form is modified or not. If any fields are modified, this will be true. |
$invalid |
Indicates if the form is in valid state or not. |
$valid |
Indicates if the form is in valid state or not, opposite of $invalid. |
$submitted |
Indicates if the form is submitted or not. |
All above validation property is in Boolean data-type, return true or false.
Some of the input fields validations as follows:
$pristine |
Indicates if a field is modified. |
$dirty |
Indicates if a field is modified or not, opposite of $pristine. |
$untouched |
Indicates if a field is touched or not. |
$touched |
Indicates if a field is touched or not, opposite of $untouched. |
$invalid |
Indicates if a field is valid or not. |
$valid |
Indicates if a field of valid or not, opposite of $invalid |
All field is of type Boolean data-type, return true or false.
Now we will look at an example on using AngularJS Validations. We will use Bootstrap css to create the following example. Also AngularJS validation classes are used and explained below the example.
Example of Validations in AngularJS:
<html>
<head>
<title>AngularJS - Web Forms</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.ng-pristine
{
border:1px solid blue;
}
.ng-dirty {
border: 1px solid purple;
}
.ng-valid {
border: 1px solid green;
}
.ng-invalid {
border: 1px solid red;
}
</style>
</head>
<body ng-app="myApp" >
<div ng-controller="myController">
<form ng-submit="submitForm()" name="form" style="padding: 20px;margin:10px;background-color: #fcfcfc;">
<div class="row">
Enter your name:
<input type="text" maxlength="50" class="form-control"
name="name" ng-model="name" autocomplete="off" required />
<br />
Enter your Email Address:
<input type="email" maxlength="50" name="email"
class="form-control"
ng-model="email" autocomplete="off" required />
<br /><br />
<button type="submit" class="btn btn-success">Submit</button>
<table class="table table-condensed" style="margin-top:5px;">
<thead>
<tr>
<th>
Validation name
</th>
<th>
Form
</th>
<th>
Name
</th>
<th>
Email
</th>
</tr>
</thead>
<tr>
<td>
Pristine
</td>
<td>
{{form.$pristine}}
</td>
<td>
{{form.name.$pristine}}
</td>
<td>
{{form.email.$pristine}}
</td>
</tr>
<tr>
<td>
Dirty
</td>
<td>
{{form.$dirty}}
</td>
<td>
{{form.name.$dirty}}
</td>
<td>
{{form.email.$dirty}}
</td>
</tr>
<tr>
<td>
Valid
</td>
<td>
{{form.$valid}}
</td>
<td>
{{form.name.$valid}}
</td>
<td>
{{form.email.$valid}}
</td>
</tr>
<tr>
<td>
Submitted
</td>
<td>
{{form.$submitted}}
</td>
<td>
NA
</td>
<td>
NA
</td>
</tr>
<tr>
<td>
Touched
</td>
<td>
NA
</td>
<td>
{{form.name.$touched}}
</td>
<td>
{{form.email.$touched}}
</td>
</tr>
<tr>
<td>
Untouched
</td>
<td>
NA
</td>
<td>
{{form.name.$untouched}}
</td>
<td>
{{form.email.$untouched}}
</td>
</tr>
</table>
</div>
</form>
</div>
<script>
var app = angular.module("myApp",[]);
app.controller('myController', function ($scope, $http) {
$scope.submitForm = function () {
window.alert("You entered: \r\nName: " + $scope.name + "\r\nEmail: " + $scope.email);
///Call a web api to post data to the server.
};
});
</script>
</body>
</html>
OUTPUT:
The table below the controls will show us the current state of each control and form itself. AngularJS also manages the CSS property of each control depending on the validations used. The CSS property used in this example are:
.ng-invalid – Indicates if the user input is invalid.
.ng-valid – Indicates if the user input is valid.
.ng-dirty – Indicates a control is dirty (modified by user).
.ng-pristine – Indicates a control is in pristine state (once the control is edited, it $prisitine is in false state, even after user deletes the content of a control and it is in the state when it was loaded).
This classes are useful to tell the users if the value they have entered is valid or invalid. In the coming parts, we will learn more on validations and creating custom-validations.