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.

Answer 1

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

Answer 2

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>