Angular JS Forms With Validation

Angular JS Forms With Validation

Angular JS Forms With Validation,AngularJS form filling and validation. We use ng-click to handle AngularJS click on button and use $dirty and $invalid flags to do the validations in error 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 dispaly on events first.

Event

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

ng-click

<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 = "Pramod";
         $scope.lastName = "Kumawat";
         $scope.email = "kumawat.pramodkumar6@gmail.com";
  }   
   $scope.reset();
}

Validate data in AngularJs

  • $dirty – states that value has been changed.
  • $invalid– states that value entered is invalid.
  • $error– states the exact error

Example of angular form and validation

       <html>
        <head>
        <title>Angular JS Forms With Validation</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: #FFCCFF;
        }
        table tr:nth-child(even) {
          background-color: #FFCC99;
        }
        </style>
        </head>
        <body>
        <h2>AngularJS Application With Validation</h2>
        <div ng-app="mainApp" ng-controller="userController">
        <form name="userForm" novalidate>
        <table border="0">
        <tr><td>First name:</td><td><input name="firstname" type="text" ng-model="firstName" required>
           <span style="color:red" ng-show="userForm.firstname.$dirty && userForm.firstname.$invalid">
              <span ng-show="userForm.firstname.$error.required">Please Enter you First Name.</span>
           </span>
        </td></tr>
        <tr><td>Last name: </td><td><input name="lastname"  type="text" ng-model="lastName" required>
           <span style="color:red" ng-show="userForm.lastname.$dirty && userForm.lastname.$invalid">
              <span ng-show="userForm.lastname.$error.required">Please Enter your Last Name.</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="userForm.email.$dirty && userForm.email.$invalid">
              <span ng-show="userForm.email.$error.required">Email is required.</span>
              <span ng-show="userForm.email.$error.email">Invalid email address.</span>
           </span>
        </td></tr>
        <tr><td><button ng-click="reset()">Reset</button></td><td><button 
            ng-disabled="userForm.firstname.$dirty && userForm.firstname.$invalid ||
                      userForm.lastname.$dirty && userForm.lastname.$invalid ||
                      userForm.email.$dirty && userForm.email.$invalid"
            ng-click="submit()">Submit</button></td></tr>
        </table>
        </form>
        </div>
        <script>
        var mainApp = angular.module("mainApp", []);
        mainApp.controller('userController', function($scope) {
           $scope.reset = function(){
                $scope.firstName = "Pramod";
                $scope.lastName = "Kumawat";
                $scope.email = "kumawat.pramodkumar6@gmail.com";
           }   
           $scope.reset();
        });
        </script>
        </body>
        </html>

angularfromwithvalidation

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates