AngularJS Form Validation

We created an HTML form in the previous section. Here, we will implement client side validation in AngularJS form.
AngularJS includes the following validation directives.


Directive

Description

ng-required

Sets required attribute on an input field.

ng-minlength

Sets minlength attribute on an input field.

ng-maxlength

Sets maxlength attribute on an input field. Setting the attribute to a negative or non-numeric value, allows view values of any length.

ng-pattern

Sets pattern validation error key if the ngModel value does not match the specified RegEx expression.

Let's implement validation in the student form which contains First Name, Last Name and Email fields.

 

AngularJS Form Validation Example:

1) Sample Form.

<html>
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app >
<form name="studentForm" novalidate>
<label for="firstName">First Name: </label> <br />
<input type="text" name="firstName" ng-model="student.firstName" ng-required="true" />
<span ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">First name is required.</span><br /><br />
<label for="lastName">Last Name</label><br />
<input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="student.lastName" />
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br /><br />
<label for="dob">Email</label><br />
<input type="email" id="email" ng-model="student.email" name="email" />
<span ng-show="studentForm.email.$touched && studentForm.email.$error.email">Please enter valid email id.</span><br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

2) Sample form2:
    <!DOCTYPE html> 
     <html> 
       <head> 
          <title>Angular JS Forms</title> 
          <script src = "angular.min.js"></script> 
           
     <style> 
             table, th , td { 
                border: 1px solid grey; 
                border-collapse: collapse; 
                padding: 5px; 
             } 
              
             table tr:nth-child(odd) { 
                background-color: lightpink; 
             } 
              
             table tr:nth-child(even) { 
                background-color: lightyellow; 
             } 
          </style> 
           
       </head> 
       <body> 
           
          <h2>AngularJS Sample Application</h2> 
          <div ng-app = "mainApp" ng-controller = "studentController"> 
              
             <form name = "studentForm" novalidate> 
                <table border = "0"> 
                   <tr> 
                      <td>Enter first name:</td> 
                      <td><input name = "firstname" type = "text" ng-model = "firstName" required> 
                         <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid"> 
                            <span ng-show = "studentForm.firstname.$error.required">First Name is required.</span> 
                         </span> 
                      </td> 
                   </tr> 
                    
                   <tr> 
                      <td>Enter last name: </td> 
                      <td><input name = "lastname"  type = "text" ng-model = "lastName" required> 
                         <span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid"> 
                            <span ng-show = "studentForm.lastname.$error.required">Last Name is required.</span> 
                         </span> 
                      </td> 
                   </tr> 
                    
                   <tr> 
                      <td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required> 
                         <span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid"> 
                            <span ng-show = "studentForm.email.$error.required">Email is required.</span> 
                            <span ng-show = "studentForm.email.$error.email">Invalid email address.</span> 
                         </span> 
                      </td> 
                   </tr> 
                    <tr> 
                      <td> 
                         <button ng-click = "reset()">Reset</button> 
                      </td> 
                      <td> 
                         <button ng-disabled = "studentForm.firstname.$dirty && 
                            studentForm.firstname.$invalid || studentForm.lastname.$dirty && 
                            studentForm.lastname.$invalid || studentForm.email.$dirty && 
                            studentForm.email.$invalid" ng-click="submit()">Submit</button> 
                      </td> 
                   </tr> 
         </table> 
             </form> 
          </div> 
            <script> 
             var mainApp = angular.module("mainApp", []); 
             mainApp.controller('studentController', function($scope) { 
                $scope.reset = function(){ 
                   $scope.firstName = "D.G"; 
                   $scope.lastName = "Prasad"; 
                   $scope.email = "[email protected]"; 
                } 
                 $scope.reset(); 
             }); 
          </script> 
         </body> 
    </html> 

 

For
More Explanation
&
Online Classes

Contact Us:
+919885348743