Angular Directive not working with Input type="number"

Question

I have an input in a form that looks like this:

<input type="number" name="inputStageNumTeams" id="inputStageNumTeams"
 ng-model="s.numTeams" validate-greaterthan="2" required>

However, for some reason my custom directive validateGreaterthan isn't running correctly. If I change the input type to "text" it works like a charm! I'd like to keep the input type to number if possible.

Here is the directive in question:

app.directive('validateGreaterthan', function() {
return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {
            var number = attrs.validateGreaterthan;
            if (parseInt(viewValue) !== NaN) {
                scope.numberValid = ((viewValue && (parseInt(viewValue) >= number)) ? 'valid' : undefined);
            }

            if(scope.numberValid) {
                ctrl.$setValidity('number', true);
                return viewValue;
            } else {
                ctrl.$setValidity('number', false);
                return undefined;
            }

        });
    }
};
});

To be clear, when input type is set to number, the directive won't ever run, but when set to text it will run on every change of the input (what I want). — sailboatlie
– sailboatlie, Commented Feb 4, 2013 at 4:08

bbs · Accepted Answer · 2013-02-04 07:44:02Z

3

Why do you not try to use the already existing [min="{string}"] directive?

http://docs.angularjs.org/api/ng.directive:input.number

answered Feb 4, 2013 at 7:44

bbs

2,0531 gold badge18 silver badges17 bronze badges

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

Comments

Laurent Zuijdwijk · Accepted Answer · 2013-02-04 11:23:47Z

0

I am pretty sure that the attribute value (attrs.validateGreaterthan) is a string. Convert that string to an integer, to make sure you are comparing the same type.

answered Feb 4, 2013 at 11:23

Laurent Zuijdwijk

6113 silver badges6 bronze badges

1 Comment

sailboatlie Over a year ago

I don't think that's the problem. I tried logging the attribute and the directive is never actually getting called when the input is set to number.

Collectives™ on Stack Overflow

Angular Directive not working with Input type="number"

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related