CODEWITHSUNDEEP
angularjs
northsideknight
northsideknight

Reputation: 1557

Watch other model value in angular directive

I have two fields: a password field and a confirm password field.

According to business requirements, a password mismatch can only be shown from the confirm password field at certain times if at those times the passwords do not match.

I have decided the best way to do this is create a confirm password directive:

.directive('confirmPasswordDirective',
['$timeout',
function($timeout){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function($scope, $element, $attrs, ngModel){
      var getPassword = function(){//function to get password field value
        return $scope.$eval($attrs.password);
      };
    //                     below is undefined
    $scope.$watch([$attrs, $scope.$eval($attrs.password)], function(){
      ngModel.$validators.confirmPassword = function(){
        //watch ngModel here
      };
    });
  }
}
}])

I can get the password model value from the getPassword() function, but I cannot seem to simply watch the model value of the password from this directive and test validity based on its value.

Any idea how to do this?

Upvotes: 0

Views: 371

Answers (1)

JB Nizet
JB Nizet

Reputation: 691805

If you wanto the callback function to be called every time the password changes, what uou must watch is the getPassword function:

$scope.$watch(getPassword, function(){
    ...
});

I see no reason to redefine the confirmPassword validator every time the password changes though. What the callback should do is simply validate the field every time the password changes. The validator should be defined and added once.

Upvotes: 2

Related Questions