Angular date picker 选中日期后自动重置为今日日期如何解决

问题原因 #

• 表单绑定逻辑冲突：同时使用了响应式表单的formControlName和模板驱动的[(ngModel)]双向绑定，二者更新逻辑互斥导致选中值被覆盖
• FormControl重复赋值：在组件生命周期钩子（如ngOnChanges）或模板表达式中多次给日期表单控件赋值今日日期，选中的新值被后续赋值覆盖
• 日期适配器配置异常：未正确配置日期解析/显示格式，选中的日期被识别为非法值，自动回退到默认的今日日期

修复步骤 #

1. 移除重复绑定属性
   使用响应式表单时仅保留formControlName属性即可，删除多余的[(ngModel)]绑定，避免更新冲突：

<!-- 错误写法 -->
<input matInput [matDatepicker]="picker" formControlName="chooseDate" [(ngModel)]="currentDate">

<!-- 正确写法 -->
<input matInput [matDatepicker]="picker" formControlName="chooseDate">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

2. 调整表单控件初始化逻辑
   仅在组件初始化时给日期控件赋值一次，不要在后续生命周期钩子中重复赋值为新的Date实例：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class DateDemoComponent {
  dateForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 仅在构造函数/ngOnInit中初始化一次表单
    this.dateForm = this.fb.group({
      chooseDate: [new Date(), Validators.required]
    })
  }
}

3. （可选）配置统一日期格式
   如果项目需要自定义日期解析显示规则，在根模块/共享模块中配置日期适配器，避免时区/格式解析异常：

import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';

const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY年MM月',
    dateA11yLabel: 'YYYY年MM月DD日',
    monthYearA11yLabel: 'YYYY年MM月',
  },
};

// 添加到模块的providers数组中
providers: [
  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
  { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
  { provide: MAT_DATE_LOCALE, useValue: 'zh-CN' }
]

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