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.


  • 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


<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>
   function studentController($scope) { 
      $scope.reset = function(){
         $scope.firstName = "Pramod";
         $scope.lastName = "Kumawat";
         $ = "";

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

        <title>Angular JS Forms With Validation</title>
        <script src=""></script>
        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;
        <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>
        <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>
        <tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required>
        <span style="color:red" ng-show="$dirty &&$invalid">
              <span ng-show="$error.required">Email is required.</span>
              <span ng-show="$">Invalid email address.</span>
        <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 ||
            $dirty &&$invalid"
        var mainApp = angular.module("mainApp", []);
        mainApp.controller('userController', function($scope) {
           $scope.reset = function(){
                $scope.firstName = "Pramod";
                $scope.lastName = "Kumawat";
                $ = "";


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