首页 文章

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

提问于
浏览 次
5

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

更具体地说，2 例：

  • 范围 0 [1] -23(小时)

  • 范围 O [2] -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相关的问题，因为标准验证有效，e.g.

<input type="number">

允许只输入数字(但****任何不是我想要的**数字)

我也尝试了min =0 和max =23(或 59)属性类型但是这也不起作用。

regex html5 forms angular

2 回答

  • 4
    <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>
    回复于
  • 4

    为了将来参考，我使用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>
    回复于

相关问题