Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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,

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.