AngularJS - Forms

AngularJS enriches form filling and validation. We can use ng-click to handle AngularJS click on button and use $dirty and $invalid flags to do the validations in seemless way. Use novalidate with a form declaration to disable any browser specific validation. Forms controls makes heavy use of Angular events. Let's have a quick look on events first.

Events

AngularJS provides multiple events which can be associated with the HTML controls. For example ng-click is normally associated with button. Following are supported events in Angular JS.

ng-click

Reset data of a form using on-click directive of a button.

<input name = "firstname" type = "text" ng-model = "firstName" required>

<input name = "lastname" type = "text" ng-model = "lastName" required>

<input name = "email" type = "email" ng-model = "email" required>

<button ng-click = "reset()">Reset</button>

 

<script>

   function studentController($scope) {

      $scope.reset = function(){

         $scope.firstName = "Mahesh";

         $scope.lastName = "Parashar";

         $scope.email = "MaheshParashar@tutorialspoint.com";

      }  

     

      $scope.reset();

   }

</script>

Validate data

Following can be used to track error.

·        $dirty − states that value has been changed.

·        $invalid − states that value entered is invalid.

·        $error − states the exact error.

Example

Following example will showcase all the above mentioned directives.

testAngularJS.htm

<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: #f2f2f2;

         }

        

         table tr:nth-child(even) {

            background-color: #ffffff;

         }

      </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 = "Mahesh";

               $scope.lastName = "Parashar";

               $scope.email = "MaheshParashar@tutorialspoint.com";

            }

           

            $scope.reset();

         });

      </script>

     

   </body>

</html>