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>