AngularJS Form Validation - What is Form Validation in AngularJS
AngularJS offers validation of client-side forms. It permits you to inform the user of the current status by examining the state of the form and input fields
AngularJS offers validation of client-side forms. It permits you to inform the user of the current status by examining the state of the form and input fields.
The following directives use to track mistakes in an AngularJS form :
-
$dirty: If the form declares that a value has been modified, then validation is used in the form.
-
$invalid: If the form enters value is invalid, then validation is used in the form.
-
$error: If the form details the specific error, then validation is used in the form.
Syntax
The following syntax shows the validation of the form.
|
<input type = "email" ng-model = "email" name = "email" required> <span style = "color:red" ng-show = "firstForm.email.$touched && firstForm.email.$invalid"> <span ng-show = "firstForm.email.$error.required"> Email Id is required. </span> </span> |
Examples
The following examples show form and its validation for user data.
Example#1: The AngularJS form with touched and error validation.
|
<!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <h3>AngularJS Form</h3> <form name="firstForm"> User Name:<br> <input type="text" name="userName" ng-model="userName"> <span ng-show="firstForm.userName.$touched && firstForm.userName.$error"> user name is required.</span> <br> Email:<br> <input type="text" ng-model="email" name="email"> <span ng-show="firstForm.email.$touched && firstForm.email.$error"> email is required.</span> <br> Contact:<br> <input type="type" ng-model="number" name="number"> <span ng-show="firstForm.number.$dirty && firstForm.number.$error"> Contact is required.</span> <br> <br> <button ng-click="submit()">Submit</button> </form> </div> </body> </html> |
Output
 |
Example#2: The AngularJS form with required validation.
|
<!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <h3>AngularJS Form</h3> <form name="firstForm" novalidate> User Name:<br> <input type="text" name="userName" ng-model="userName" required> <span style="color:red" ng-show="firstForm.userName.$touched && firstForm.userName.$error"> user name is required.</span> <br> Email:<br> <input type="email" ng-model="email" name="email" required> <span style="color:red" ng-show="firstForm.email.$touched && firstForm.email.$invalid"> <span ng-show="firstForm.email.$error.required"> Email Id is required.</span> </span> <br> Contact:<br> <input type="type" ng-model="number" name="number"> <span ng-show="firstForm.number.$touched && firstForm.number.$error"> Contact is required.</span> <br> <br> <button ng-click="submit()">Submit</button> </form> </div> </body> </html> |
Output
 |
Example#3: The AngularJS Email Validation example
|
<!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <h3>AngularJS Form</h3> <form name="firstForm" novalidate> User Name:<br> <input type="text" name="userName" ng-model="userName" required> <br> Email:<br> <input type="email" ng-model="email" name="email" required> <span style="color:red" ng-show="firstForm.email.$touched && firstForm.email.$invalid"> <span ng-show="firstForm.email.$invalid"> Email Id is invalid.</span> </span> <br> Contact:<br> <input type="type" ng-model="number" name="number"> <br> <br> <button ng-click="submit()">Submit</button> </form> </div> </body> </html> |
Output
 |
Summary
The AngularJS validation creates a user-friendly and informative form. It helps the user decide required, invalid, or duplicate data in the form