AngularJS Custom Directive For Validation - Input depending on another

Question

In an AngularJS app, I have two dropdowns, one for the number of adults and another for the number of children. I need to validate if the number of children is always lower or equal than the number of adults.

I've made a custom directive to validate this, and it works fine when I change the number of children, but I would also need it to work when I change the number of adults.

<select name="adults" ng-model="pax.adults" ng-options="v for v in options">
</select>
<select name="children" ng-model="pax.children" ng-options="v for v in options" children>

app.directive('children', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            var pax = scope.pax;
            ctrl.$parsers.unshift(function (viewValue) {
                ctrl.$setValidity('children', viewValue <= pax.adults);
                return viewValue;
            });
        }
    };
});

For example, I have 2 adults and 3 children, number of children is invalid. If I change the number of children to 2, it becomes valid, but if instead I change the number of adults to 3, the children validation doesn't get fired.

What is the best way to achieve this in an angular way?

Here is a jsFiddle illustrating what I'm doing: http://jsfiddle.net/geZB5/

Cheers,

Ygor Cardoso · Accepted Answer · 2013-07-08 13:35:18Z

1

Ok, discovered the answer in the AngularJS google group, just needed to add a watch on adult value:

        scope.$watch('pax.adults', function(value) {
            ctrl.$setValidity('children', ctrl.$viewValue <= value);
        });

The corresponding jsFiddle: http://jsfiddle.net/4vfBf/

answered Jul 8, 2013 at 13:35

Ygor Cardoso

2613 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Custom Directive For Validation - Input depending on another

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related