Post
Ask Question

Start With AngularJS: Part 8

Thank you for reading my previous articles. If you have not read them, then study from the following links. After reading them it will be easier to understand today’s topics.

Validation

AngularJS allows us to make own custom validation directive where we can check email id, compare password, and bind the dropdown list.

It has some properties which have shown us errors after the form validation.

It is given below:

  • $valid: $valid is a Boolean property that tells us whether what you insert in the form is valid or not. It checks if all form controls are valid then shows true; otherwise false.

  • $invalid: $invalid is Boolean property that tell us what you enter in form is invalid or not. If form input is valid it disappear or invalid shows users error.

  • $pristine: $pristine tell us about its input is unmodified by user or not.

  • $dirty: It is Boolean property that’s just opposite of $pristine and it tells form modified by user or not.

  • $error: This is an object hash which contains references to all invalid controls or forms.

Let’s start creating projects:

  • Open Visual Studio 2013.
  • Create new project.
  • Add new html form.
  • Add your cdn link of AngularJS & Bootstrap.

AngularJS

  1. <!DOCTYPE html>  
  2. <html ng-app="app">  
  3.   
  4.     <head>  
  5.         <title>Registration</title>  
  6.         <meta charset="utf-8" />  
  7.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">  
  8.             <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  9.                 </script>  
  10.                 <script>  
  11.                 var app = angular.module("app", []);  
  12.                 app.directive("ngCompare", function ()  
  13.                 {  
  14.                     return {  
  15.                         require: 'ngModel',  
  16.                         link: function (scope, currentEl, attrs, ctrl)  
  17.                         {  
  18.                             var compareField = document.getElementsByName(attrs.ngCompare)[0];  
  19.                             var compareEl = angular.element(compareField);  
  20.                             currentEl.on("keyup", function ()  
  21.                             {  
  22.                                 var isMatch = compareEl.val() === currentEl.val();  
  23.                                 ctrl.$setValidity('compare', isMatch);  
  24.                                 scope.$digest();  
  25.                             });  
  26.                             compareEl.on("keyup", function ()  
  27.                             {  
  28.                                 var isMatch = compareEl.val() === currentEl.val();  
  29.                                 ctrl.$setValidity('compare', isMatch);  
  30.                                 scope.$digest();  
  31.                             });  
  32.                         }  
  33.                     }  
  34.                 });  
  35.                 app.controller("ctrl", function ($scope)  
  36.                 {  
  37.                     $scope.IsSubmit = false;  
  38.                     $scope.CountryList = [  
  39.                     {  
  40.                         id: 1,  
  41.                         name: "India"  
  42.                     },  
  43.                     {  
  44.                         id: 2,  
  45.                         name: "America"  
  46.                     }];  
  47.                     $scope.CityList = [];  
  48.                     $scope.$watch("user.Country", function (newVal, oldVal)  
  49.                     {  
  50.                         console.log(newVal);  
  51.                         if (newVal == 1)  
  52.                         {  
  53.                             $scope.CityList = [  
  54.                             {  
  55.                                 id: 1,  
  56.                                 name: "Noida"  
  57.                             },  
  58.                             {  
  59.                                 id: 2,  
  60.                                 name: "Delhi"  
  61.                             },  
  62.                             {  
  63.                                 id: 3,  
  64.                                 name: "Allahabad"  
  65.                             },  
  66.                             {  
  67.                                 id: 4,  
  68.                                 name: "Varanasi"  
  69.                             }];  
  70.                         }  
  71.                         elseif(newVal == 2)  
  72.                         {  
  73.                             $scope.CityList = [  
  74.                             {  
  75.                                 id: 5,  
  76.                                 name: "Kaliforniya"  
  77.                             },  
  78.                             {  
  79.                                 id: 6,  
  80.                                 name: "newjurcy"  
  81.                             },  
  82.                             {  
  83.                                 id: 7,  
  84.                                 name: "washington"  
  85.                             },  
  86.                             {  
  87.                                 id: 8,  
  88.                                 name: "newyork"  
  89.                             }];  
  90.                         }  
  91.                     });  
  92.                     $scope.SaveData = function ()  
  93.                     {  
  94.                         $scope.IsSubmit = true;  
  95.                         if ($scope.UserForm.$valid)  
  96.                         {  
  97.                             alert("Form is Valid!");  
  98.                         }  
  99.                         else  
  100.                         {  
  101.                             alert("Form is Invalid!");  
  102.                         }  
  103.                     }  
  104.                 });  
  105.                 </script>  
  106.     </head>  
  107.     <body class="container" ng-controller="ctrl">  
  108.     <h2>User SignUp</h2>  
  109.     <form name="UserForm" ng-submit="SaveData(user)" class="form-horizontal" novalidate>  
  110.         <div class="form-group">  
  111.             <label class="col-md-4">Username:  
  112.             </label>  
  113.             <div class="col-md-8">  
  114.                 <input type="text" name="Username" ng-model="user.Username" ng-required="true" class="form-control" ng-minlength="3" ng-maxlength="10" />  
  115.                 <p class="text-danger" ng-show="UserForm.Username.$error.required&& (IsSubmit || UserForm.Username.$dirty)">Please Enter Username:  
  116.                 </p>  
  117.                 <p class="text-danger" ng-show="UserForm.Username.$error.minlength&& (IsSubmit || UserForm.Username.$dirty)">*Username must has atleast three characters  
  118.                 </p>  
  119.                 <p class="text-danger" ng-show="UserForm.Username.$error.maxlength&& (IsSubmit || UserForm.Username.$dirty)">*Username cannot has more than 10 characters  
  120.                 </p>  
  121.             </div>  
  122.         </div>  
  123.         <div class="form-group">  
  124.             <label class="col-md-4">Full Name:  
  125.             </label>  
  126.             <div class="col-md-8">  
  127.                 <input type="text" name="Fullname" ng-model="user.Fullname" ng-required="true" class="form-control" />  
  128.                 <p class="text-danger" ng-show="UserForm.Fullname.$error.required&& (IsSubmit || UserForm.Fullname.$dirty)">*Please Enter Fullname  
  129.                 </p>  
  130.             </div>  
  131.         </div>  
  132.         <div class="form-group">  
  133.             <label class="col-md-4">Password:  
  134.             </label>  
  135.             <div class="col-md-8">  
  136.                 <input type="password" name="Password" ng-model="user.Password" ng-required="true" class="form-control" />  
  137.                 <p class="text-danger" ng-show="UserForm.Password.$error.required&& (IsSubmit || UserForm.Password.$dirty)">*Please Enter Password  
  138.                 </p>  
  139.             </div>  
  140.         </div>  
  141.         <div class="form-group">  
  142.             <label class="col-md-4">Confirm Password:  
  143.             </label>  
  144.             <div class="col-md-8">  
  145.                 <input type="password" name="ConfirmPassword" ng-model="user.ConfirmPassword" ng-required="true" class="form-control" ng-compare="Password" />  
  146.                 <p class="text-danger" ng-show="UserForm.ConfirmPassword.$error.required&& (IsSubmit || UserForm.ConfirmPassword.$dirty)">*Please Enter ConfirmPassword  
  147.                 </p>  
  148.                 <p class="text-danger" ng-show="UserForm.ConfirmPassword.$error.compare&& (IsSubmit || UserForm.ConfirmPassword.$dirty)">**Confirm Password Doesn't match  
  149.                 </p>  
  150.             </div>  
  151.         </div>  
  152.         <div class="form-group">  
  153.             <label class="col-md-4">Email  
  154.             </label>  
  155.             <div class="col-md-8">  
  156.                 <input type="email" name="Email" ng-model="user.Email" ng-required="true" class="form-control" />  
  157.                 <p class="text-danger" ng-show="UserForm.Email.$error.required&& (IsSubmit || UserForm.Email.$dirty)">*Please Enter Email  
  158.                 </p>  
  159.                 <p class="text-danger" ng-show="UserForm.Email.$error.email&& (IsSubmit || UserForm.Email.$dirty)">**Please Enter Correct Email  
  160.                 </p>  
  161.             </div>  
  162.         </div>  
  163.         <div class="form-group">  
  164.             <label class="col-md-4">Mobile No:  
  165.             </label>  
  166.             <div class="col-md-8">  
  167.                 <input type="number" name="Mobile" ng-model="user.Mobile" ng-required="true" class="form-control" />  
  168.                 <p class="text-danger" ng-show="UserForm.Mobile.$error.required&& (IsSubmit || UserForm.Mobile.$dirty)">*Please Enter Mobile no.  
  169.                 </p>  
  170.                 <p class="text-danger" ng-show="UserForm.Mobile.$error.number&& (IsSubmit || UserForm.Mobile.$dirty)">**Please Enter Numbers Only  
  171.                 </p>  
  172.             </div>  
  173.         </div>  
  174.         <div class="form-group">  
  175.             <label class="col-md-4">Country:  
  176.             </label>  
  177.             <div class="col-md-8">  
  178.                 <select name="Country" ng-model="user.Country" ng-options="country.id as country.name for country in CountryList" ng-required="true" class="form-control">  
  179.                     <option value="">Select  
  180.                     </option>  
  181.                 </select>  
  182.                 <p class="text-danger" ng-show="UserForm.Country.$error.required&& (IsSubmit || UserForm.Country.$dirty)">*Please Select Country  
  183.                 </p>  
  184.             </div>  
  185.         </div>  
  186.         <div class="form-group">  
  187.             <label class="col-md-4">City:  
  188.             </label>  
  189.             <div class="col-md-8">  
  190.                 <select name="City" ng-model="user.City" ng-options="city.name for city in CityList" ng-required="true" class="form-control">  
  191.                     <option value="">Select  
  192.                     </option>  
  193.                 </select>  
  194.                 <p class="text-danger" ng-show="UserForm.City.$error.required&& (IsSubmit || UserForm.City.$dirty)">*Please Select Country  
  195.                 </p>  
  196.             </div>  
  197.         </div>  
  198.         <div class="form-group">  
  199.             <label class="col-md-4">  
  200.             </label>  
  201.             <div class="col-md-8">  
  202.                 <input type="submit" value="SignUp" class="btnbtn-primary" ng-disabled="UserForm.$invalid" />  
  203.             </div>  
  204.         </div>  
  205.     </form>  
  206. </body>#ff0000</html>  
Output

Output

So, today we read about validation on form.

Read more articles on AngularJS:


Similar Articles