how to $watch multiple variables in angularjs?

Question

Here is a angularjs directive to show multiple form validation errors.
directive code -

app.directive('validationErrors', function($compile) {
    return({
        link : function($scope, el, attr) {

            $scope.fld = attr.id;
            $scope.individualValidationErrors = [];
            var model = ((attr.ngModel).split('.'))[0];

            $scope.validationErrors = {};
            $scope.validationErrors[model] = {};
            $scope.validationErrors[model][$scope.fld] = "";

            var html = $compile(
                '<div id="error-{{fld}}" style="color:red;">'+
                    '<ul>' +
                        '<li ng-repeat="error in individualValidationErrors[fld]">'+
                            '{{error}}' +
                        '</li>' +
                    '</ul>' +
                '</div>'
            )($scope);
            $('input[id="'+$scope.fld+'"]').after(html);

            $scope.$watch('validationErrors',
                function(newV) {
                    $scope.fld = attr.id;
                    $scope.individualValidationErrors = [];

                    console.log(newV);
                    console.log($scope.validationErrors);

                    if ($scope.fld != undefined) {
                        $scope.individualValidationErrors[$scope.fld] = $scope.validationErrors[model][$scope.fld];
                        //console.log($scope.individualValidationErrors);
                    }
                },
                true
            );
        }
    });
});

Html code -

<form ng-submit="registration()">
    <input validation-errors="validationErrors" maxlength="50" type="text" id="first_name" ng-model="User.first_name">
    <input validation-errors="validationErrors" maxlength="50" type="text" id="last_name" ng-model="User.last_name">
    <input validation-errors="validationErrors" maxlength="50" type="text" id="email" ng-model="User.email">
    <input validation-errors="validationErrors" type="password" id="password"  ng-model="User.password">
    <input class="btn btn-info" type="submit" id="registration-sbmit" value="Submit">
</form>

the error of the last field of form overwrites all fields in the form and so it is not showing individual error for field.. $scope.validationErrors variable is set in controller which i want to $watch in directive.

To watch multiple things at the same time in a directive, see stackoverflow.com/questions/12975949/… — Mark Rajcok
– Mark Rajcok, Commented Mar 12, 2013 at 15:42

Jason Aden · Accepted Answer · 2013-03-12 12:48:39Z

1

I think your primary issue here is that you are overwriting $scope.validationErrors in your link function. The link function will be run for every directive on the page. They are also sharing the same $scope object. So you need to conditionally create $scope.validationErrors and conditionally add top-level keys to it:

if(!$scope.validationErrors)
    $scope.validationErrors = {};
if(!$scope.validationErrors[model])
    $scope.validationErrors[model] = {};
$scope.validationErrors[model][$scope.fld] = "";

That should at least clear up your issue where you are only getting the last item in $scope.validationErrors.

answered Mar 12, 2013 at 12:48

Jason Aden

2,8231 gold badge20 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

btm1 · Accepted Answer · 2013-10-12 19:49:48Z

0

You can do it like this:

$scope.$watch('[myproperty1,myproperty2,myproperty3]',function(nv,ov){
//do some stuff
});

answered Oct 12, 2013 at 19:49

btm1

3,8562 gold badges25 silver badges26 bronze badges

Collectives™ on Stack Overflow

how to $watch multiple variables in angularjs?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related