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 inpu

Answer 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);
};

Answer 2

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>

Answer 3

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.

Answer 4

You can change your input to match a pattern:

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