如何正确验证HTML输入中的数字范围？ （Angular 2）

Question

在我的Angular 2应用程序中，我有一个带有输入字段的组件，它应该接受一系列数字。

更具体地说，2例：

• 范围0 [0] -23（小时）
• 范围O [0] -59（分钟）

我正在使用

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

问题在于我基本上可以输入任何内容（，好像忽略了验证），包括文本。 我不认为这是与 Angular 2 相关的问题，因为标准验证有效，例如

 <input type="number"> 

只允许输入数字（但任何数字，这不是我想要的）

我还尝试使用类型为数字的 min = 0和 max = 23（或59）属性，但这也不起作用

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

供将来参考， 我使用 Angular 2的FormBuilder 解决了这个问题：

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