Angular 16实现HH:MM格式时间输入及验证方案咨询

一、自定义指令（无第三方依赖，轻量可控） #

自己实现指令处理输入格式化与验证，完全适配Angular 16，无依赖兼容问题。

1. 创建时间掩码指令 #

import { Directive, HostListener, ElementRef } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';

@Directive({
  selector: '[appTimeMask]',
  providers: [{ provide: NG_VALIDATORS, useExisting: TimeMaskDirective, multi: true }]
})
export class TimeMaskDirective implements Validator {
  constructor(private el: ElementRef) {}

  @HostListener('input', ['$event'])
  onInput(event: Event): void {
    const input = this.el.nativeElement;
    let value = input.value.replace(/\D/g, ''); // 移除所有非数字字符

    // 格式化为 HH:MM 结构
    if (value.length >= 2) {
      value = value.slice(0, 2) + (value.length > 2 ? ':' + value.slice(2, 4) : '');
    }
    input.value = value;
  }

  validate(control: AbstractControl): { [key: string]: any } | null {
    const value = control.value;
    if (!value) return null;

    // 验证格式合法性与时间范围
    const timeRegex = /^([01]\d|2[0-3]):([0-5]\d)$/;
    if (!timeRegex.test(value)) {
      return { invalidTime: true };
    }
    return null;
  }
}

2. 组件中使用 #

模板绑定指令并添加错误提示：

<input type="text" formControlName="time" appTimeMask placeholder="HH:MM">
<div *ngIf="timeControl.hasError('invalidTime') && timeControl.touched">请输入有效的HH:MM格式时间</div>

组件类定义表单控件：

import { FormControl, FormGroup } from '@angular/forms';

// ...
form = new FormGroup({
  time: new FormControl('')
});

get timeControl() {
  return this.form.get('time') as FormControl;
}

二、使用 ngx-mask 库（成熟掩码解决方案） #

ngx-mask 支持Angular 16，是广泛使用的表单掩码库，配置简单。

1. 安装依赖 #

npm install ngx-mask --save

2. 配置与使用 #

在app.module.ts导入模块：

import { NgxMaskModule } from 'ngx-mask';

@NgModule({
  imports: [
    // ...
    NgxMaskModule.forRoot()
  ]
})
export class AppModule {}

模板中应用掩码：

<input type="text" formControlName="time" mask="HH:mm" placeholder="HH:MM">
<div *ngIf="timeControl.invalid && timeControl.touched">请输入有效的时间格式</div>

三、借助UI组件库内置功能 #

若项目已使用Angular UI组件库，可直接利用其自带的时间输入/掩码能力：

1. Angular Material #

使用原生时间输入类型，浏览器自动限制格式并提供基础验证：

<input matInput type="time" formControlName="time" placeholder="HH:MM">

2. PrimeNG #

使用InputMask组件快速实现掩码：

<p-inputMask mask="99:99" formControlName="time" placeholder="HH:MM"></p-inputMask>

可额外添加自定义验证器确保时间在00:00-23:59范围内。

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