Angular 输入上的掩码和验证程序出现角度问题

我在输入上使用掩码和正则表达式时遇到问题

这是输入：

<mat-form-field
  >
    <mat-label >HH:mm:ss:SSS</mat-label>
    <input
      matInput
      [formControlName]="duration?.id"
      [id]="duration?.id"
      [name]="duration?.id"
      placeholder="HH:mm:ss:SSS"
      appDurationMask
      type="text"
    />
    <mat-error *ngIf="!isInvalidPattern"
      >{{ duration?.label }} is required</mat-error
    >
    <mat-error *ngIf="isInvalidPattern"
      >invalid pattern must be HH:mm:ss:SSS</mat-error
    >
  </mat-form-field>

掩码指令如下所示：

get isInvalidPattern() {
    return this.form.controls[this.data.id].errors
      ? this.form.controls[this.data.id].errors.pattern
      : false;
  }

    export class DurationMaskDirective {
  constructor(public ngControl: NgControl) {}

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false);
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(event) {
    this.onInputChange(event.target.value, true);
  }

  onInputChange(event, backspace) {
    let newVal = event.replace(/\D/g, '');
    if (backspace && newVal.length <= 6) {
      newVal = newVal.substring(0, newVal.length - 1);
    }
    if (newVal.length === 0) {
      newVal = '';
    } else if (newVal.length <= 2) {
      newVal = newVal.replace(/^(\d{0,2})/, '$1');
    } else if (newVal.length <= 4) {
      newVal = newVal.replace(/^(\d{0,2})(\d{0,2})/, '$1:$2');
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,2})(\d{0,2})(\d{0,2})/, '$1:$2:$3');
    } else if (newVal.length <= 9) {
      newVal = newVal.replace(
        /^(\d{0,2})(\d{0,2})(\d{0,2})(\d{0,3})/,
        '$1:$2:$3:$4'
      );
    } else {
      newVal = newVal.substring(0, 9);
      newVal = newVal.replace(
        /^(\d{0,2})(\d{0,2})(\d{0,2})(\d{0,3})/,
        '$1:$2:$3:$4'
      );
    }
    this.ngControl.valueAccessor.writeValue(newVal);
    this.ngControl.valueAccessor.writeValue(newVal);
  }

导出类DurationMaskDirective{
构造函数（公共ngControl:ngControl）{}
@HostListener（'ngModelChange'，['$event']））
onModelChange（事件）{
此.onInputChange（事件，false）；
}
@HostListener（'keydown.backspace'，['$event']））
keydownBackspace（事件）{
此.onInputChange（event.target.value，true）；
}
onInputChange（事件，退格）{
让newVal=event.replace（/\D/g'）；
if（backspace&&newVal.length）如果您提供指向stackblitz或类似内容的链接，则会有所帮助