AngularJs Confirm Password Validation

AngularJs Confirm Password Validation

AngularJs code-sample Live Demo
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var app = angular.module("app", []);
    app.controller("confirmCtrl", function($scope) {
      $scope.user = {
        password: "",
        confirmPassword: ""
      };
    });
    app.directive("compareTo", function() {
      return {
        require: "ngModel",
        scope: {
          confirmPassword: "=compareTo"
        },
        link: function(scope, element, attributes, modelVal) {
          modelVal.$validators.compareTo = function(val) {
            return val == scope.confirmPassword;
          };
          scope.$watch("confirmPassword", function() {
            modelVal.$validate();
          });
        }
      };
    });
var app = angular.module("app", []);
    app.controller("confirmCtrl", function($scope) {

      $scope.user = {
        password: "",
        confirmPassword: ""
      };
    });

    app.directive("compareTo", function() {
      return {
        require: "ngModel",
        scope: {
          confirmPassword: "=compareTo"
        },
        link: function(scope, element, attributes, modelVal) {

          modelVal.$validators.compareTo = function(val) {
            return val == scope.confirmPassword;
          };

          scope.$watch("confirmPassword", function() {
            modelVal.$validate();
          });
        }
      };
    });
CSS code-sample
?
1
2
3
4
5
6
7
8
.ng-invalid {
     border-color: red;
     outline-color: red;
   }
   .ng-valid {
     border-color: green;
     outline-color: green;
   }
.ng-invalid {
     border-color: red;
     outline-color: red;
   }
   .ng-valid {
     border-color: green;
     outline-color: green;
   }
HTML code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
<div ng-controller="confirmCtrl">
  <div>
    <lable></lable>
    <div>
      <label>Password</label>
      <input type="password" name="pwd" ng-model="user.password" required class="form-control" />
    </div>
    <div>
      <label>Confirm Password</label>
      <input type="password" name="confirmPassword" ng-model="user.confirmPassword" required compare-to="user.password" class="form-control" />
    </div>
  </div>
</div>
<div ng-controller="confirmCtrl">
  <div>
    <lable></lable>
    <div>
      <label>Password</label>
      <input type="password" name="pwd" ng-model="user.password" required class="form-control" />
    </div>
    <div>
      <label>Confirm Password</label>
      <input type="password" name="confirmPassword" ng-model="user.confirmPassword" required compare-to="user.password" class="form-control" />
    </div>
  </div>
</div>
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book