1

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?

Community
  • 1
  • 1
onkami
  • 8,791
  • 17
  • 90
  • 176
  • that directive only removes spaces and makes everything lowercase, it does not prevent entering non-number characters. – Quad May 30 '14 at 11:14
  • @Quad, there is also this expression: .replace(/[^0-9]+/g, ''); – onkami May 30 '14 at 14:57
  • oops,did not see it. But as MJV says, it probably because you get a Number as `inputValue` instead of a string. – Quad May 30 '14 at 15:48

1 Answers1

1

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.).

Community
  • 1
  • 1
MJV
  • 1,782
  • 2
  • 21
  • 33
  • Yes, if it is that helpless maybe I have to create a special type. – onkami Jun 01 '14 at 14:25
  • and in fact input=text works great with min and max attributes, validating field correctly. – onkami Jun 04 '14 at 09:34
  • Yes, and if you have a bunch of those fields and they represent something special, that custom type may also express that well. (E.g. in this case I thought about percentage values, ranging from 1 to 99, and then `` would be good for readability.) – MJV Jun 04 '14 at 14:03
  • You can find the workaround to the problem in following answer https://stackoverflow.com/questions/18510845/maxlength-ignored-for-input-type-number-in-chrome/34641129#34641129 – Avinash Jain Jun 20 '17 at 18:25