Angular.JS - only allow up to a certain number value in an input number field

Question

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.

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

Casey · Accepted Answer · 2016-05-18 16:27:22Z

8

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">

answered May 18, 2016 at 16:27

Casey

3,3831 gold badge28 silver badges42 bronze badges

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

4 Comments

Max Lynn Over a year ago

Could you explain to me what the step attribute does please?

Michelangelo Over a year ago

@MaxLynn It makes sure that everytime a user clicks on + or - it will increase or decrease with 1

Casey Over a year ago

@MaxLynn Setting step=1 indicates that you want an integer. You'd use step=.01 for currency. It's the interval between valid values. And also what Mikey said.

Max Lynn Over a year ago

Thanks I didn't know this

Andy Gaskell · Accepted Answer · 2016-05-18 16:27:54Z

2

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.

answered May 18, 2016 at 16:27

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

Comments

pedrum golriz · Accepted Answer · 2016-05-18 16:30:31Z

1

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

answered May 18, 2016 at 16:30

pedrum golriz

5128 silver badges28 bronze badges

3 Comments

Casey Over a year ago

That's a poor user experience IMO.

pedrum golriz Over a year ago

@Casey its better than letting users input false data and having to re-enter it when the form is submitted and validation fails

Casey Over a year ago

He's using angular; there's no reason the user can't have that validation as he enters or blurs the field. You don't have to wait for a submit.

johan · Accepted Answer · 2016-05-18 16:46:50Z

1

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">

answered May 18, 2016 at 16:46

johan

1,0129 silver badges20 bronze badges

Comments

inafalcao · Accepted Answer · 2016-05-18 16:24:59Z

0

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.

answered May 18, 2016 at 16:24

inafalcao

1,4522 gold badges13 silver badges26 bronze badges

3 Comments

Max Lynn Over a year ago

Not sure I can justify a lib for this

Casey Over a year ago

Yes, these exist, but that's inappropriate for this problem.

inafalcao Over a year ago

Indeed. That's just an option.

Collectives™ on Stack Overflow

Angular.JS - only allow up to a certain number value in an input number field

5 Answers 5

4 Comments

Comments

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related