Angular时间选择器实现：输入更新前的合法性校验问题

嘿，我明白你在Angular里做时间选择器时遇到的输入校验难题了！刚好我之前也处理过类似的需求，给你几个实用的解决方案：

方案一：优化keypress事件，即时拦截非法输入 #

你当前的正则是匹配完整的合法小时值（0-23），但用户输入是逐步的（比如先输2，再输3是合法的，但输2后再输4就不行），所以得调整正则，允许中间状态的合法输入。

修改后的keyPress函数如下：

keyPress(event: KeyboardEvent) {
  // 允许删除、退格等控制键（这些键的charCode为0）
  if (event.charCode === 0) {
    return;
  }

  const inputChar = String.fromCharCode(event.charCode);
  // 拼接当前输入的字符，模拟输入后的临时值
  const tempHour = `${this.hour || ''}${inputChar}`;
  
  // 正则规则：允许空值、单个数字（0-9）、10-19、20-23
  const validPattern = /^$|^[0-9]$|^[1][0-9]$|^2[0-3]$/;
  
  if (!validPattern.test(tempHour)) {
    event.preventDefault(); // 阻止非法字符输入
  }
}

这个方案能在用户输入时就拦截掉不合法的字符，比如输入24时，第二个4会被直接阻止，体验更流畅。

方案二：结合Angular表单验证，做更规范的校验 #

如果你的项目用了Angular表单（推荐用响应式表单），可以通过表单控件的内置验证器+自定义验证器来实现，这种方式更符合Angular的最佳实践，还能方便地显示错误提示。

1. 在组件中定义表单控件

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent {
  hourControl = new FormControl('', [
    Validators.required,
    Validators.min(0),
    Validators.max(23),
    // 自定义验证器：确保输入是整数
    (control) => {
      const value = control.value;
      if (value && !Number.isInteger(+value)) {
        return { notInteger: true };
      }
      return null;
    }
  ]);
}

2. 修改HTML模板

<input matInput style="text-align: right;" [formControl]="hourControl" type="number" min="0" max="23">

<!-- 显示错误提示 -->
<mat-error *ngIf="hourControl.hasError('required')">
  小时不能为空
</mat-error>
<mat-error *ngIf="hourControl.hasError('min') || hourControl.hasError('max')">
  请输入0-23之间的整数
</mat-error>
<mat-error *ngIf="hourControl.hasError('notInteger')">
  请输入有效的整数
</mat-error>

这种方案的好处是：即使用户通过粘贴或其他方式输入了非法值，表单会自动标记为无效，同时清晰地提示用户错误原因。

小提示 #

如果想兼顾即时拦截和表单验证，可以把两种方案结合起来：用keypress阻止大部分非法输入，再用表单验证兜底，确保最终输入的合法性。

内容的提问来源于stack exchange，提问作者SureLi