CODEWITHSUNDEEP
javascriptangularjsvalidation
jped
jped

Reputation: 486

angularjs $setValidity from a directive not updating

I am trying to build a custom directive (based on an example I saw) to ensure that the confirm password is correct. I am running into some trouble with the $setValidity tag, although all my console.log() execute and print out, it does not seem that the validity is being updated. Pass stays true even when I read in my console "set to false". I made sure the name and the ng-model are the same and I also tried using scope.$apply, but that would comeout with an error saying i was trying to apply when something else is being applied.

Here is my code: HTML

<form ng-submit="signup()" name="profileForm">


            <div class="form-group">
              <label class="form-label" for="input-example-2">Password</label>
              <input class="form-input" ng-model="pnew" type="password" name="pnew" placeholder="Password" required>
            </div>
            <div class="form-group">
              <label class="form-label" for="input-example-2">Confirm Password</label>
              <input class="form-input" name="confirm" ng-model="confirm" type="password"  placeholder="Password" required pwcheck>
            </div>
            {{profileForm.confrim.$error.pass}}
            <hr>
            {{profileForm.confirm.$error}}
            <hr>
            {{profileForm.confirm.$valid}}
            <span ng-show="profileForm.confirm.$error.pwCheck"> the passwords dont match</span>
            <div class="form-group">
              <button class="btn btn-primary">Sign up</button>
            </div>
          </form>

JS code for the pwcheck directive

.directive('pwcheck', function() {   
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      function valid(value){
          scope.$watch("confirm", function(newval, oldval){
            console.log(value);
            console.log(scope.pnew);
              if(value==scope.pnew){
                console.log("success!");
                ctrl.$setValidity('pass', true);
                return value;
              }
              else {
                console.log("set to false");
                ctrl.$setValidity('pass', false);
                return undefined;
              }

          });
      }
      ctrl.$parsers.push(valid);
    }   } });

Upvotes: 0

Views: 629

Answers (1)

Shantanu
Shantanu

Reputation: 3513

No need to use $watch on confirm if you're using your directive on same element & having ng-model in require. So your code can be

ctrl.$parsers.unshift(valid);
ctrl.$formatters.unshift(valid);

function valid(viewValue){
    console.log(viewValue);
    console.log(scope.pnew);
      if(viewValue==scope.pnew){
        console.log("success!");
        ctrl.$setValidity('pass', true);
        return viewValue;
      }
      else {
        console.log("set to false");
        ctrl.$setValidity('pass', false);
        return undefined;
      }
}

Most trivial example plunk https://plnkr.co/edit/vPbICfSCDnwHKh07DAXJ?p=preview

Upvotes: 1

Related Questions