Angular custom directive for positive integers

Question

I have text field in my application which should accept only positive integers only.(no decimal, no negatives). Basically I want to restrict the user to enter only between 1 to 9999 only.

<input type="text" min="0" max="99" number-mask="">

I found this from googling jsfiddle it accepts negative integers and it doesn't work with internet explorer.

I don't have mush experience writing directives. At the moment I am learning angular as well. (I use typscript to generate angular in my .net mvc project)

var app = angular.module('myApp', []);

app.directive('numberMask', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).numeric();
        }
    }
});

In this code is it possible to check for negatives? Something like

if(element <0 && element.lenth > 4)
  .....
else
  ....

Thanks in Advance

Try this man : http://stackoverflow.com/a/20368741/2837412 – Nishchit Dec 04 '13 at 06:45 — Nishchit, Dec 04 '13 at 06:45

score 4 · Accepted Answer · answered Oct 02 '13 at 04:47

4

angular.module('myapp', [])
.directive('numberMask', function() {
    return function(scope, element, attrs) {
        var min = parseInt(attrs.min, 10) || 0,
            max = parseInt(attrs.max, 10) || 10, 
            value = element.val();
        element.on('keyup', function(e) {
            if (!between(element.val(), min, max)) {
               element.val(value);
            } else {
                value = element.val();
            }
        });

        function between(n, min, max) { return n >= min && n <= max; }
    }
});

http://jsfiddle.net/9HgBY/

answered Oct 02 '13 at 04:47

Adrian

190
6

thanks this is great. but it still accepts decimal values ex: 9.365 – yohan.jayarathna Oct 02 '13 at 05:34
you can change the between function to say validate and validate your input – Adrian Oct 02 '13 at 14:39
I like the simplicity of your solution, but this is as good as useless if you're using ng-model with the input, as the model is still changed regardless of this validation function. – Nikolaj Dam Larsen Nov 09 '13 at 13:41

Nikolaj Dam Larsen · Answer 2 · 2016-08-15T22:16:11.943

I modified Adrians answer to support use of ng-model. It most probably isn't the prettiest piece of code, but it gets the job done.

angular.module('myapp', [])
.directive('numberMask', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, elem, attrs, ctrl) {   
            var oldValue = null;
            scope.$watch(attrs.ngModel, function (newVal, oldVal) {
                var min = parseInt(attrs.min) || 0;
                var max = parseInt(attrs.max) || 10;
                if (!between(newVal, min, max)) {
                    if (newVal > max)
                        ctrl.$setViewValue(max);
                    else if (newVal < min)
                        ctrl.$setViewValue(min);
                    else
                        ctrl.$setViewValue(oldValue);
                    ctrl.$render();
                }else{
                    oldValue = newVal;
                }
            }, true);

            function between(n, min, max) { return n >= min && n <= max; }
        }
    };
});

Here's Adrians fiddle with my additions http://jsfiddle.net/9HgBY/3/

Angular custom directive for positive integers

2 Answers2