I'm trying to understand a way with angular where I can only let the user enter a number that isn't more than 24 or in my other input 60 to represent hours and minutes.

            <input type="number"
                   placeholder="HH"
                   ng-minlength="2"
                   ng-maxlength="2"
                   required
                   ng-model="session.timeHH">

            <input type="number"
                   placeholder="mm"
                   ng-minlength="2"
                   required
                   ng-maxlength="2"
                   ng-model="session.timeMM">

This is my HTML at the moment.

The user can enter in the hours input a number like 99 which is obviously going to be wrong. I'm looking for a way to validate or prevent the user before submit to only be able to enter numbers up to 24 for hours and 59 for minutes.

Or even on the click of the submit button would be sufficient.

I'm trying to understand a way with angular where I can only let the user enter a number that isn't more than 24 or in my other input 60 to represent hours and minutes.

            <input type="number"
                   placeholder="HH"
                   ng-minlength="2"
                   ng-maxlength="2"
                   required
                   ng-model="session.timeHH">

            <input type="number"
                   placeholder="mm"
                   ng-minlength="2"
                   required
                   ng-maxlength="2"
                   ng-model="session.timeMM">

This is my HTML at the moment.

The user can enter in the hours input a number like 99 which is obviously going to be wrong. I'm looking for a way to validate or prevent the user before submit to only be able to enter numbers up to 24 for hours and 59 for minutes.

Or even on the click of the submit button would be sufficient.

• javascript
• angularjs

• Well, if it's enough to just validate, you could use min and max attributes. – John Smith Commented May 18, 2016 at 16:27

5 Answers 5

Not angular, but why not use the HTML attributes? Angular is hip to these and you can check the $valid property of the form to make sure the constraints are satisfied.

<input type="number" min="0" max="24" step="1">

How about just HTML5 since you're already using type="number":

<input type="number" name="hours" min="1" max="24">

Be sure to also validate input on the server side.

If you want to restrict numbers use a dropdown, otherwise you'll have to use native min and max attributes with validation.

Why not make use of the type properties to the inputs as time, this will open a time selector on modern browsers and mobiles

https://plnkr.co/edit/TAwugxjQHcMtJONQJgWA?p=preview

         <input type="time"
               placeholder="HH:MM"
               required
               ng-model="session.timeHH">

You can use some angular mask lib that provides masking features.

The ones you could use are, for example, angular-input-masks, ui-mask or ngMask.