CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
onkami
onkami

Reputation: 9441

Directive restricting input is not working with type=number

I have a custom directive that restricts input to specific symbols, in my case, only numbers. It is made after filters on ng-model in an input and it works fine in text-type inpit.

Directive declared as

     .directive('onlydigitinput', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue.toLowerCase().replace(/ /g, '').replace(/[^0-9]+/g, '');
                if (transformedInput != inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }
                return transformedInput;
            });
        }
    };
})

but in case of numerical input I want to use input type=number, not type=text:

<input type="number"  
onlydigitinput="onlydigitinput" required="required" min="1" max="99" maxlength="2">

and then it's a problem: I have correct validation based on min-max attribute, but I still can enter all symbols, such as letters, and directive does not work as it should. Additionally, maxlength seems not to have effect. How I can possibly fix my directive to work with type="number" inputs?

Upvotes: 1

Views: 2034

Answers (1)

MJV
MJV

Reputation: 1882

There are two issues here. First, the maxlength attribute doesn't work with input type number. See e.g. maxlength ignored for input type=“number” in Chrome.

Second, when the input type is number, your directive's function only gets a value for the inputValue parameter when it's a number. See this fiddle as an example (the console output might make it clearer).

Edit:

How crucial is it for you to use the number type input? If the spinner controls that browsers add to the input field for it aren't a necessity, I'd probably go for a custom type like described here: How to create a custom input type?

I've used something very similar for e.g. money input fields (with localized decimal separators etc.).

Upvotes: 1

Related Questions