Angular JS - How do you validate the number of digits in a number input

Question

What we are looking to do is, have an input that only accepts 0 - 24 (for a time entry application).

These are the values the user should be able to enter into the input:

The current code is as follows:

HTML:

        <div class="list list-inset">
            <label class="item item-input">
                <input id="time" type="number" placeholder="24" ng-model="$parent.time1" ng-change="onChange(time1)">
            </label>
            <label class="item item-input">
                <input type="tel" placeholder="24" ng-model="time2" >
            </label>
        </div>

JS/Angular:

  var savedTime = 0;
   $scope.onChange = function(time) {
      if (time > 23 || currentTime > 2) {
        $scope.time1 = savedTime;
      } else {
        savedTime = time;  
      };
  };

This works fine for limiting the numbers, but it doesn't prevent the user from entering unlimited numbers of preceding 0s, which we don't want.

I tried using time.toString().length and adding some validation using that, but turns out, 00000 as a number, when set to string still becomes "0".

Is there a better way to limit the amount of digits to 2?

Thanks muchly.

ng-maxlength should do, but on another note, if they user wana write 0003 (donno why), why should you emit an error? — Tomer W
– Tomer W, Commented Nov 17, 2015 at 13:03
@TomerW The reason we want to not allow that is due to the fact that this is a time entry application, and that particular text box will be the one they enter "hours" in. And we feel allowing the user to enter "0000003" hours doesn't really make sense, we'd rather limit it to 2 digits. I tried ng-maxlength, but it doesn't seem to work, still lets the user enter as many numbers as they want :/ — Joel Damien
– Joel Damien, Commented Nov 18, 2015 at 8:33
@TomerW I just tried ng-maxlength again. It works, but whenever you exceed 2 digits, instead of blocking further input (which would be ideal) it simply resets the field. Which I suppose is a solution we can work with. Thanks. — Joel Damien
– Joel Damien, Commented Nov 18, 2015 at 8:39

John C · Accepted Answer · 2015-11-17 12:53:51Z

1

Simply add $scope.time1 = parseInt(savedTime) to the end of your function-

var savedTime = 0;
   $scope.onChange = function(time) {
      if (time > 23 || currentTime > 2) {
        $scope.time1 = savedTime;
      } else {
        savedTime = time;  
      };
      $scope.time1 = parseInt(savedTime);
};

answered Nov 17, 2015 at 12:53

John C

3,1123 gold badges36 silver badges50 bronze badges

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

6 Comments

Joel Damien Over a year ago

var num = 000; parseInt(num) -> 0 parseInt(num).length -> 1

John C Over a year ago

@JoelDamien Put the following into the Chrome debugger console var num = 00000000000; parseInt(num); and you get 0.

Joel Damien Over a year ago

Whoops, accidentally pressed enter. Here's what I meant to post: var num = 000; parseInt(num) -> 0 parseInt(num).length -> 1 parseInt(num).toString().length -> 1 I need it to parse the length as 3.

Joel Damien Over a year ago

Yes. I know it does, and I don't want it to do that. I want parseInt(num) to return how many zeroes are in it.

John C Over a year ago

@JoelDamien If you want to force 2 chars in the field (although that is not what your example numbers suggest) I'd go with a variation on @ergonaut s answer changing the pattern to /[0-9]{2}/

|

Amir · Accepted Answer · 2015-11-17 12:56:38Z

0

Maybe you could use the [ng-maxlength="number"] directive. Set it to 2 like this:

    <div class="list list-inset">
        <label class="item item-input">
            <input id="time" type="number" placeholder="24" ng-model="$parent.time1" ng-change="onChange(time1)" ng-maxlength="2">
        </label>
        <label class="item item-input">
            <input type="tel" placeholder="24" ng-model="time2" ng-maxlength="2">
        </label>
    </div>

answered Nov 17, 2015 at 12:56

Amir

2,2777 gold badges35 silver badges48 bronze badges

Comments

ergonaut · Accepted Answer · 2015-11-17 12:57:17Z

0

You can change your input to match a pattern:

<input type="number" ng-pattern="/^[0-9]{1,2}$/" ...>

answered Nov 17, 2015 at 12:57

ergonaut

7,0671 gold badge21 silver badges50 bronze badges

Comments

sma · Accepted Answer · 2015-11-17 13:03:31Z

0

Depends on the effect you want to achieve. You can do something like this:

<input type="text" ng-pattern="/[0-9]{1,2}/" 
               maxlength="2"
               ng-model="myCtrl.title">

Which will prevent the user from entering any more than 2 characters. If the characters are anything but a number, it will set the field class to ng-invalid-pattern.

If you don't want to prevent the user from entering two characters and just want to show a validation message if they enter three or more, just remove the maxlength.

answered Nov 17, 2015 at 13:03

sma

9,5978 gold badges53 silver badges83 bronze badges

1 Comment

Joel Damien Over a year ago

Input type has to be number (so as to only open the number keypad on mobile device). maxlength does not work with number type inputs.

Collectives™ on Stack Overflow

Angular JS - How do you validate the number of digits in a number input

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related