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

Posted 2023-03-05

【中文标题】如何正确验证 HTML 输入中的数字范围？ （角度 2）

【英文标题】：How to correctly validate number ranges in HTML Input? (Angular 2)

【发布时间】：2016-09-09 18:49:04

【问题描述】：

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

更具体地说，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"> 

只允许输入 数字（但 any 数字不是我想要的）

我也尝试使用 min=0 和 ma​​x=23（或 59）类型为 number 的属性，但这也不起作用.

【问题讨论】：

不是。我认为问题是某处缺少一些属性，但我不知道在哪里

【参考方案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>

【讨论】：

感谢@Gunter。我试过了。也许它可以工作，但根本没有输出（我需要实时验证表单，我不确定提交时是否会返回错误）。正如我的回答中所解释的，我终于解决了“角度方式”。如果你能解释它应该如何工作，我很乐意接受答案！

我会和一个小伙子核实一下，但今天不行了

你有机会尝试吗？

我离开了几天。它不工作。 min 和 max 需要 type="number" 但由于 github.com/angular/angular/issues/2961 它目前仍然不起作用。另见plnkr.co/edit/CT9aoN7xu9OJgaCY0pid?p=preview

谢谢！我希望它很快就会起作用（当问题得到解决时）

【参考方案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>