首页 > 解决方案 > 以 HHH:MM 格式输入小时的 Angular 自定义验证器

问题描述

我需要在几小时和几分钟内验证输入,但它是 HHH:MM 中 6 个字符的奇怪格式。例如,需要在输入中输入30 小时和 15 分钟,例如030:15

下面是我创建自定义验证器的尝试,但我需要一些帮助才能让正则表达式比较输入的小时数在 0-70 和分钟之间为 00-59。

import { AbstractControl, ValidatorFn, FormControl } from '@angular/forms';
export class RegexConstants {
  public static DECIMAL_6_4 = /^[0-9:-]{6}$/;
}
export function hoursClaimedValidator(input: string,reg: RegexConstants){     

    return (control: AbstractControl):{[key: string]: boolean} | null => {

    if( control.value !==null && (isNaN(control.value) || control.value.toString().match(reg))) 
    {
       return {'hoursClaimed': true}
    }
    return null;
 };
}

标签: angularvalidationangular-custom-validators

解决方案


所以,如果你需要一个正则表达式来处理你需要的输入,你可以试试这个:

hhhmm = new RegExp(/^0([0-6][0-9]|70):[0-5][0-9]$/);

使用第一个插入符号,您强制用户以 0 开头。然后您创建一个or语句,让用户在 00 到 69 组合或 70 之间进行选择。在此之后,需要冒号 (:)。最后,字符串必须以 00 到 59 之间的数字结尾。


推荐阅读