Friday, September 25, 2015

Password compare directive angularJs

Some times on your angularjs application you may need to compare your sign up form password and confirm it. here's the simple directive for compare password on the fly.
.directive('validateEquals', [function () {
    return {
      require: 'ngModel',
      link: function (scope, elem, attrs, ctrl) {
        var firstPassword = '#' + attrs.validateEquals;
        elem.add(firstPassword).on('keyup', function () {
          scope.$apply(function () {
            var v = elem.val()===$(firstPassword).val();
            ctrl.$setValidity('inputmatch', v);
          });
        });
      }
    } 
On your Html for can setup like this
<input id="input1" name="input1" ng-model="input1" ng-required="" type="password" />
<input id="input2" name="input2" ng-model="input2" ng-required="" type="password" validate-equals="input1" />
to show error message
<div ng-show="myForm.$error">
  <span  ng-show="myForm.input2.$error.inputmatch">
    Passwords don't match.
  </span>
</div>
Happy coding!!!