Angular自定义验证器开发求助：HHH:MM格式小时输入的正则验证（小时范围0-70、分钟范围00-59）

没问题，我帮你调整正则表达式和验证器逻辑，完美适配你要的0-70小时、00-59分钟的6字符格式要求。

第一步：编写精准的正则表达式 #

咱们需要严格匹配HHH:MM格式，其中HHH是带前导零的3位小时数（000-070），MM是两位分钟数（00-59）。对应的正则表达式如下：

public static HHMM_VALID = /^(0[0-6]\d|070):[0-5]\d$/;

拆解一下这个正则的逻辑：

• ^ 和 $：确保整个输入字符串完全匹配，避免出现部分符合的情况（比如前面多字符）
• 0[0-6]\d：匹配000到069的3位小时数（覆盖0-69小时的带前导零输入）
• 070：单独匹配70小时的合法输入（070）
• :[0-5]\d：匹配冒号加上00-59的两位分钟数

第二步：修正自定义验证器函数 #

你原来的验证器有几个小问题：参数类型不对、逻辑判断反了、不必要的isNaN判断。我帮你调整成更简洁准确的版本：

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class RegexConstants {
  // 替换原来的DECIMAL_6_4，用新的验证正则
  public static HHMM_VALID = /^(0[0-6]\d|070):[0-5]\d$/;
}

export function hoursClaimedValidator(reg: RegExp): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    // 如果控件为空，直接通过验证（如果需要必填验证可以单独加Validators.required）
    if (!control.value) {
      return null;
    }
    // 把值转成字符串，验证是否匹配正则
    const valueStr = control.value.toString().trim();
    if (!reg.test(valueStr)) {
      // 不匹配则返回错误标记
      return { 'hoursClaimed': true };
    }
    // 匹配通过，返回null表示验证成功
    return null;
  };
}

第三步：在表单中使用验证器 #

你可以像这样在FormControl里添加这个验证器：

import { FormControl, Validators } from '@angular/forms';
import { hoursClaimedValidator, RegexConstants } from './your-validator-path';

// 示例：创建带验证的表单控件
const hoursControl = new FormControl('', [
  Validators.required, // 如果需要必填的话
  hoursClaimedValidator(RegexConstants.HHMM_VALID)
]);

这样调整后，就能准确验证输入是否符合030:15这种格式，同时确保小时在0-70之间、分钟在00-59之间啦。

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