如何修改Angular的appInputMask指令实现MM/DD/YYYY格式输入掩码

• 第一步：调整模板配置，将输入框的maxlength属性从原有值4改为10，适配MM/DD/YYYY格式的总字符长度

<input
  class="form-control"
  type="text"
  appInputMask
  formControlName="expiryDate"
  id="expiry-date"
  maxlength="10"
/>

• 第二步：替换原有InputMaskDirective指令逻辑，完整代码如下：

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[formControlName][appInputMask]',
})
export class InputMaskDirective {
  constructor(private ngControl: NgControl) {}

  @HostListener('input', ['$event'])
  onInput(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;
    // 过滤所有非数字输入
    let pureNumbers = input.value.replace(/[^0-9]/g, '');
    // 仅保留最多8位有效数字（对应MMDDYYYY总长度）
    pureNumbers = pureNumbers.slice(0, 8);

    let formattedValue = '';
    // 拼接月份段
    if (pureNumbers.length > 0) {
      formattedValue += pureNumbers.slice(0, 2);
    }
    // 拼接日段+斜杠
    if (pureNumbers.length > 2) {
      formattedValue += `/${pureNumbers.slice(2, 4)}`;
    }
    // 拼接年段+斜杠
    if (pureNumbers.length > 4) {
      formattedValue += `/${pureNumbers.slice(4, 8)}`;
    }

    input.value = formattedValue;
    // 同步更新绑定的表单控件值，避免表单提交时取值异常
    this.ngControl.control?.setValue(formattedValue, { emitEvent: false });
  }
}

实现效果说明：

1. 自动过滤非数字字符，避免非法输入
2. 输入到第2位后自动插入月后的斜杠，输入到第4位后自动插入日后的斜杠
3. 兼容删除操作，不会出现斜杠强制回显无法删除的问题
4. 输入总长度严格限制为10字符，符合需求

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