如何从Angular Material DatePicker的FormControl中获取日期值

问题根源 #

1. FormControl初始值设为''（字符串类型），但Angular Material DatePicker选中日期后返回的是Date对象，类型不匹配会导致值读取异常。
2. 原代码通过FormGroup间接取值，不如直接利用dateChange事件的参数准确。

解决方案 #

1. 修正FormControl初始化 #

将fechaSolicitud的初始值改为null（符合DatePicker的value类型Date|null），避免类型冲突：

PayFormGroup = new FormGroup({
  // ...其他表单控件
  fechaSolicitud: new FormControl<Date | null>(null, [Validators.required]),
  // ...其他表单控件
});

2. 利用dateChange事件参数直接获取日期 #

修改HTML中的事件绑定，传递$event参数，在方法中直接读取选中的日期：

<input matInput [matDatepicker]="dp_" formControlName="fechaSolicitud" 
        (dateChange)="showDate($event)">
<mat-datepicker-toggle matIconSuffix [for]="dp_"></mat-datepicker-toggle>
<mat-datepicker #dp_></mat-datepicker>

对应的TS方法：

import { MatDatepickerInputEvent } from '@angular/material/datepicker';

// ...

showDate(event: MatDatepickerInputEvent<Date>) {
  const selectedDate = event.value;
  
  // 打印原始Date对象
  console.log('选中的日期（Date对象）:', selectedDate);
  
  // 如需格式化为字符串（比如YYYY-MM-DD）
  if (selectedDate) {
    const formattedDate = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}`;
    console.log('格式化后的日期:', formattedDate);
  }

  // 此时FormControl的值也同步为正确的Date对象
  console.log('FormControl中的值:', this.PayFormGroup.get('fechaSolicitud')?.value);
}

补充说明 #

• Angular Material DatePicker的dateChange事件会传递包含最新选中日期的MatDatepickerInputEvent对象，直接读取event.value是最可靠的方式。
• 如果需要全局统一日期格式，可以配置MAT_DATE_FORMATS提供者，自定义DatePicker的显示和解析格式。

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