AngularJS validation with example registration from

AngularJS validation

AngularJS Validation used to validate the data of an input field. If the data does not pass validation, it will display an error message to the user.

There is three main state of validation in angularJS

$invalid: return TRUE, If everything is going fine.

$invalid: return TRUE, If at least one containing form and control is invalid.

$error: an object that containing the invalid values.

$dirty: return TRUE, If the user interacts with the filed already.

There are so many types of validation in AngularJS like Required Field, Minimum Length, Maximum Length, Pattern etc.

Registration form in angularJS with validation

Text validation in angularJS

Email validation in angularJS

Password validation in angularJS

index.html

<html>  
   <head>  
      <title>Angular JS Forms</title>  
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
    <script src="js/index.js"></script>
    <style>
      input.ng-dirty.ng-invalid {
 				 border : 2px solid red;
}
    </style>

  </head>  
   <body>  
        <pre>
      <h2>AngularJS Registration form for validation</h2>  
      <div ng-app = "myApp" ng-controller = "myCtrl">  
          
         <form name = "frm" ng-submit="myFunc()">  
      Name  : <input name = "name" type = "text" ng-model = "name" ng-minlength ="5" ng-maxlength = "8" required> 
     	<span ng-show = "frm.name.$dirty && frm.name.$invalid">Length should be 5 to 8</span>
     	
     	Email : <input name="email" type="email" required ng-model="email">
     	<span ng-show="frm.email.$dirty && frm.email.$invalid">Its not valid format</span>
     	<span ng-show="frm.email.$dirty && frm.email.$error.required">Its required in proper format</span>
     
        Password : <input name = "pass" type="password" ng-model="pass" ng-minlength="4"
         ng-maxlength = "8" required> 
        <p ng-show="frm.pass.$dirty && frm.pass.$invalid">Length should be 5 to 8</p>
        <p ng-show="frm.pass.$dirty && frm.pass.$error.required">Its required</p>
        
        <input type="submit">
    
     </form>  
        {{myTxt}}
      </div>  
       </pre>
     </body>  
</html>

index.js

 

var mainApp = angular.module("myApp", []);

mainApp.controller('myCtrl', function($scope) {

$scope.myTxt = "Still you did not submit";

$scope.myFunc = function(){

$scope.myTxt = "Your data is submited";

}

});

 

Add a Comment

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

16 − fourteen =