AngularJS Forms

AngularJS enriches data binding and validation of input controls. The ng-click directive can be used to handle AngualrJS click on button. Moreover, $dirty and $invalid flags can be used to do the validations in a very simple manner.

The usage of novalidate with a form declaration disables any browser specific validation. There is heavy use of Angular events in forms controls. Let us have a look at the events one by one.


Events

There are multiple events in AngularJS that can be associated with the HTML controls. One of the examples is that of ng-click which is normally associated with button. Given below is a list of events that are supported by AngularJS.

  • input elements
  • select elements
  • button elements
  • textarea elements

AngularJS provides multiple events that can be associated with the HTML controls. These events are associated with the different HTML input elements.

  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

Now let us have a look at each of these in detail.

ng-click- The ngClick directive lets you assign a custom behavior when you click on an element.

ng-dbl-click- The ngDblclick directive allows you to assign a behavior on a dblclick event.

ng-mousedown- The ngMousedown directive allows you to assign a behavior on mousedown event.

ng-mouseup- The ngMousedown directive allows you to assign a behavior on mouseup event.

ng-mouseenter- The ngMousedown directive allows you to assign a behavior on mouseenter event.

ng-mouseleave- The ngMousedown directive allows you to assign a behavior on mouseleave event.

ng-mousemove- The ngMousedown directive allows you to assign a behavior on mousemove event.

ng-mouseover- The ngMousedown directive allows you to assign a behavior on mouseover event.

ng-keydown- The ngMousedown directive allows you to assign a behavior on keydown event.

ng-keyup- The ngMousedown directive allows you to assign a behavior on keyup event.

ng-keypress- The ngMousedown directive allows you to assign a behavior on keypress event.

The ng-change expression is evaluated only when a new value is to be committed to the model due to a change in the input value. It will not be evaluated:

  • if the returned value from the $parsers transformation pipeline is unchanged
  • if the model is always null due to invalid input since the beginning.
  • if there is a change in the model source code rather than the input value.

A crucial point is that this directive requires the presence of ng-model.

Validate data

In case there is an error the following can be used to track them.

  • $dirty - This states that there is a change in value.
  • $invalid - This states that an invalid value has been entered.
  • $error - This states the exact error that has occurred.

AngularJS form example

The code mentioned below makes use of all the directives.

<!DOCTYPE html>  
<html>  
   <head>  
      <title>Angular JS Forms</title>  
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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 = "Mithilesh";  
               $scope.lastName = "Kushwaha";  
               $scope.email = "admin@javatportal.com";  
            }  
              
            $scope.reset();  
         });  
      </script>  
        
   </body>  
</html>