Angular Material datepicker手动输入值被忽略校验收null如何解决

使用Angular Material datepicker组件时存在异常表现：

• 点击日期选择弹窗选值时，校验器可正常接收到控件的正确值，校验逻辑运行符合预期
• 手动在输入框键入日期时，输入内容会被组件忽略，校验器获取到的control.value为null，无法触发正常校验

涉及的核心代码如下：

模板代码 #

<mat-form-field >
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker" formControlName="date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

响应式表单定义 #

this.form = new FormGroup({
    date: new FormControl(new Date(), [DateValidator()]),
});

自定义日期校验器 #

export function DateValidator(format = "dd/MM/yyyy"): any {
    return (control: FormControl): { [key: string]: any } => {
        const val = moment(control.value, format, true);
        console.log(control.value);
        if (!val.isValid()) {
            return {invalidDate: true};
        }
        return {};
    };
}

Angular Material Datepicker自身内置了一层输入解析逻辑：手动输入的内容会先经过组件自带的日期解析器解析，只有解析成功生成合法日期对象后，值才会被同步到绑定的FormControl；如果解析失败，组件会直接判定输入无效，不会向FormControl同步值，此时control.value就会是null，自定义校验器根本拿不到原始输入字符串。
当前校验逻辑是按照dd/MM/yyyy格式做合法性校验，但组件默认的日期解析格式和这个格式不匹配，手动输入的dd/MM/yyyy格式字符串会被默认解析器判定为无效，直接拦截在表单控件之外，才会出现弹窗选值正常、手动输入拿不到值的问题。

使用官方适配Moment的日期适配器，手动指定和业务逻辑一致的日期解析/展示格式，让组件能正确解析手动输入的dd/MM/yyyy格式内容即可。

1. 安装必要依赖

npm install @angular/material-moment-adapter moment

2. 在对应组件或模块级别配置自定义日期格式，注入日期适配器

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import * as moment from 'moment';

// 自定义日期格式，和校验器中使用的dd/MM/yyyy对齐
export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY', // 手动输入时的解析格式，必须和预期输入格式一致
  },
  display: {
    dateInput: 'DD/MM/YYYY', // 输入框展示格式
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  selector: 'app-datepicker-overview-example',
  templateUrl: './datepicker-overview-example.html',
  providers: [
    // 注入Moment日期适配器
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    // 注入自定义日期格式配置
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ]
})
export class DatepickerOverviewExample {
  form = new FormGroup({
    date: new FormControl(moment(), [DateValidator()]),
  });
}

配置完成后，组件会按照DD/MM/YYYY格式解析手动输入的内容，解析成功后会正常将值同步到FormControl，自定义校验器就能拿到正确的控件值执行校验逻辑。

注意：如果使用Moment作为日期处理对象，FormControl的初始值也建议替换为Moment对象，和适配器的处理逻辑保持一致，避免类型不匹配问题。

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