Home > Blog > Tutorials > Angular Tutorial for Beginners - Learn AngularJs from Scratch [Updated] > Angular Form Validation - A Beginner's Guide

Angular Form Validation - A Beginner's Guide

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:

Video Thumbnail

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

Angular JS Expert

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

About the Author

Kislay
Kislay
Technical Research Analyst - Full Stack Development

Kislay is a Technical Research Analyst and Full Stack Developer with expertise in crafting Mobile applications from inception to deployment. Proficient in Android development, IOS development, HTML, CSS, JavaScript, React, Angular, MySQL, and MongoDB, he’s committed to enhancing user experiences through intuitive websites and advanced mobile applications.