How to Implement Form Validation in Angular? - Explained

Process Advisors

ey-logo
*Subject to Terms and Condition

What is Angular Validation?

Angular Forms and controls in AngularJS give validation services and inform users of invalid input. AngularJS provides us with different information about a form or its inputs and is applied to a form and inputs.
To track error following terms are used:

  • $dirty− states that value has been altered.
  • $error− states the exact error.
  • $invalid− states that value entered is invalid.

Watch this Full Stack Web Development Course Video:


e.g.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<h1>Example of Validation</h1>
<form ng-app="myApp" ng-controller="validateCtrl"
name="intellipaatForm" novalidate>
<p>Username:<br>
<input type="text" name="username" ng-model="username" required>
<span style="color:red" ng-show="intellipaatForm.username.$dirty && intellipaatForm.username.$invalid">
<span ng-show="intellipaatForm.username.$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="intellipaatForm.email.$dirty && intellipaatForm.email.$invalid">
<span ng-show="intellipaatForm.email.$error.required">Email is required.</span>
<span ng-show="intellipaatForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="intellipaatForm.username.$dirty && intellipaatForm.username.$invalid ||
intellipaatForm.email.$dirty && intellipaatForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.username = 'abc';
$scope.email = '[email protected]';
});
</script>
</body>
</html>

Output

o18
If you remove the name of the id from the text box it shows the following output:
o19

If you are an AngularJS enthusiast, enroll in the Angular Certification Course and get certified now!

Course Schedule

Name Date Details
Web Development Courses 07 Oct 2023(Sat-Sun) Weekend Batch
View Details
Web Development Courses 14 Oct 2023(Sat-Sun) Weekend Batch
View Details
Web Development Courses 21 Oct 2023(Sat-Sun) Weekend Batch
View Details

Leave a Reply

Your email address will not be published. Required fields are marked *

Find Best AngularJS Training in Other Regions

Bangalore Hyderabad Chennai Mumbai