Angularjs setValidity causing modelValue to not update

Question

I'm having some basic trouble with a form. Here's what I did. I snagged this cool looking directive from here: https://github.com/TheSharpieOne/angular-input-match It looks like this: ``` directive('match', function () { return { require: 'ngModel', restrict: 'A', scope: { match: '=' }, link: function(scope, elem, attrs, ngModel) { scope.$watch(function() { return (ngModel.$pristine && angular.isUndefined(ngModel.$modelValue)) || scope.match === ngModel.$viewValue; }, function(currentValue, previousValue) { ngModel.$setValidity('match', currentValue); }); } }; }); ``` Essentially, this directive watches the element it is attached to's model value, and compares it to the model value in the match attribute. So...for example, below we're watching to see if both passwords match: ``` Password: Confirm: ``` The directive seems to be working, in that it sets ng-valid-match and…

Accepted Answer

It looks like maybe using $setValidity is not the way to go here. I found this question that proposes a different solution, using $validators and $validate(), and this is working for me great. The new code looks like this:

```
directive('match', function () {
  return {
    require: 'ngModel',
    restrict: 'A',
    scope: {
      match: '='
    },
    link: function(scope, elem, attrs, ngModel) {
      scope.$watch('match', function(pass){
        ngModel.$validate();
      });
      ngModel.$validators.match = function(modelValue, viewValue){
        var value = modelValue || viewValue;
        var match = scope.match;
        return value === match;
      };
    }
  };
});
```

Angularjs setValidity causing modelValue to not update

Solution

Problem