Mat-Date-Picker结合Angular2-Text-Mask时，粘贴D/M/YYYY格式日期后掩码未即时显示的问题

我之前在项目里结合Angular Material的Datepicker和angular2-text-mask时，也碰到过几乎一模一样的问题——粘贴单数字日/月的日期（比如9-8-2015）时，控件在焦点没移开前一片空白，只有失焦后才正常显示。后来试了几个方案都能解决，分享给你：

方案一：监听粘贴事件，强制触发控件更新 #

问题的核心是粘贴单数字日期后，text-mask的管道虽然处理了值，但Angular的变更检测没有即时触发，导致Datepicker的视图没更新。我们可以通过监听paste事件，手动触发值变更和变更检测：

首先修改HTML，给input添加粘贴事件绑定：

<mat-form-field [textMask]="{mask: mask, keepCharPositions: true, pipe: autoCorrectedDatePipe, guide:true}" >
  <mat-label>Employment Date</mat-label>
  <input 
    matInput 
    formControlName="EmploymentDate" 
    [matDatepicker]="EmploymentDate"
    (paste)="onPaste($event)"
  >
  <mat-datepicker-toggle matSuffix [for]="EmploymentDate"></mat-datepicker-toggle>
  <mat-datepicker #EmploymentDate></mat-datepicker>
</mat-form-field>

然后在组件里实现onPaste方法，记得注入ChangeDetectorRef来强制更新视图：

import { Component, ChangeDetectorRef } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { createAutoCorrectedDatePipe } from 'angular2-text-mask';

@Component({
  selector: 'app-employment-form',
  templateUrl: './employment-form.component.html'
})
export class EmploymentFormComponent {
  public employmentForm: FormGroup;
  public mask = [/[0-9]/, /[0-9]/, '/', /[0-9]/, /[0-9]/, '/', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/];
  public autoCorrectedDatePipe: any = createAutoCorrectedDatePipe('dd/mm/yyyy');

  constructor(
    private fb: FormBuilder,
    private cdr: ChangeDetectorRef
  ) {
    this.employmentForm = this.fb.group({
      EmploymentDate: ['']
    });
  }

  onPaste(event: ClipboardEvent) {
    // 延迟执行，确保text-mask先处理粘贴的内容
    setTimeout(() => {
      const dateControl = this.employmentForm.get('EmploymentDate');
      if (dateControl?.value) {
        // 重新设置值，触发控件的变更事件
        dateControl.setValue(dateControl.value, { emitEvent: true });
        // 强制触发变更检测，让视图即时更新
        this.cdr.detectChanges();
      }
    }, 0);
  }
}

方案二：自定义日期管道，提前处理单数字格式 #

另一个思路是在管道层面就把单数字的日/月补零，确保text-mask能正确识别并填充，这样粘贴后就能即时显示：

先创建一个自定义管道，包装原有的createAutoCorrectedDatePipe：

import { PipeTransform, Pipe } from '@angular/core';
import { createAutoCorrectedDatePipe } from 'angular2-text-mask';

@Pipe({ name: 'customAutoCorrectedDate' })
export class CustomAutoCorrectedDatePipe implements PipeTransform {
  private originalPipe = createAutoCorrectedDatePipe('dd/mm/yyyy');

  transform(value: string, ...args: any[]): any {
    // 处理用"-"分隔的单数字日期，比如把"9-8-2015"转为"09/08/2015"
    if (value && value.includes('-')) {
      const [day, month, year] = value.split('-');
      if (day && month && year) {
        value = `${day.padStart(2, '0')}/${month.padStart(2, '0')}/${year}`;
      }
    }
    // 交给原管道做后续处理
    return this.originalPipe.transform(value, ...args);
  }
}

然后在组件里替换原有的管道，并确保模块里声明了这个自定义管道：

// 组件里替换管道
public autoCorrectedDatePipe: any = new CustomAutoCorrectedDatePipe();

为什么会出现这个问题？ #

本质上是因为粘贴单数字日期时，text-mask的固定两位掩码（比如dd/mm/yyyy）需要补零，但这个补零操作完成后，没有及时触发Datepicker输入框的视图更新。只有当焦点移开时，控件才会触发值的校验和视图同步，所以我们需要手动触发这个同步过程。

你可以根据项目的复杂度选择方案，方案一快速直接，方案二更彻底地从输入处理层面解决问题。

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