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

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

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

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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related