How to correctly validate number ranges in HTML Input? (Angular 2)

Question

In my Angular 2 application I have a component with a input field which is supposed to accept a range of numbers.

More specifically, 2 cases:

range 0[0]-23 (hours)
range O[0]-59 (minutes)

I am using

<form>
    <input type="text" pattern="[0-9]"> <!-- 0-9 -->
    <input type="text" pattern="\d|1\d|2[0-3]"> <!--  0-23 -->
    <input type="text" pattern="\d\d"> <!--  [0-99] -->
</form>

The issue is that I can basically input anything (as if validation was ignored), including text. I don't think it's an issue related to Angular 2 since standard validation works, e.g.

 <input type="number">

allows to input only numbers (but any number which is not what I want)

I also tried with min=0 and max=23 (or 59) attributes with type number but that doesn't work either.

it's not. I think the issue is some missing attribute somewhere but I have no clue where — dragonmnl
– dragonmnl, Commented May 13, 2016 at 14:17

Günter Zöchbauer · Accepted Answer · 2016-05-20 18:07:22Z

5

<form>
    <input type="number" min="0" max="9"> <!-- 0-9 -->
    <input type="number" min="0" max="23"> <!--  0-23 -->
    <input type="number" min="0" max="99"> <!--  [0-99] -->
</form>

edited May 20, 2016 at 18:07

answered May 13, 2016 at 16:53

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

6 Comments

dragonmnl Over a year ago

thanks @Gunter. I tried that. maybe it works but there is no output at all (I need to validate the form in real time, I'm not sure whether on submit it'd return an error). I finally solved the "Angular way" as explained in my answer. if you can explain how it's supposed to work, I'll be happy to accept the answer!

Günter Zöchbauer Over a year ago

I'll check with a plunker but not today anymore

dragonmnl Over a year ago

did you have the chance to try?

Günter Zöchbauer Over a year ago

I was away a few days. It's not working. min and max requires type="number" but because of github.com/angular/angular/issues/2961 it still doesn't work currently. See also plnkr.co/edit/CT9aoN7xu9OJgaCY0pid?p=preview

josh Jan 7 at 15:18

On a razor website, however here with plain html, works not properly. If you enter the number by keyboard, in contrast to the up-down arrows, any number is accepted.

|

dragonmnl · Accepted Answer · 2016-05-13 16:53:15Z

For future reference, I solved by using Angular 2's FormBuilder as in:

ts

   ...

   constructor(...
               private formBuilder: FormBuilder);


   timeForm: ControlGroup;

    ngOnInit(){
        let regexPatterns = {
           // this can be improved
           hours: "[0-2]?[0-9]?",
           minutes: "[0-5]?[0-9]?"
        };

        this.timeForm = this.formBuilder.group({
           hour: ['', Validators.pattern(regexPatterns.hours)],
           minute: ['', Validators.pattern(regexPatterns.minutes)]
       });

html

       <form [ngFormModel]="timeForm">
            <!-- additional validation (HTML 5) for 'required' -->
            <input type="text" required ngControl="hour">
            <input type="text" required ngControl="minute">
       </form>

Collectives™ on Stack Overflow

How to correctly validate number ranges in HTML Input? (Angular 2)

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related