Angular mat datepicker手动输入日期不生效问题求助

问题根因 #

你同时给input绑定了[value]单向属性和[(ngModel)]双向绑定，两者值来源冲突导致输入过程中值被反复转换，出现异常解析：

• 输入单个数字时，getData方法会直接把输入值传入new Date()，浏览器/Angular Material的默认日期解析规则会将单个数字识别为当前年份的对应月份第一天，就出现了你遇到的输入1变成01-JAN-2021的问题
• 移除ngModel后冲突消失，输入正常，但失去了双向绑定能力，所以修改后的值无法同步到关联的表格数据

解决方案 #

按下面步骤修改即可同时满足正常输入和数据同步需求：

1. 移除模板中重复的[value]绑定，[(ngModel)]本身已经内置了值的渲染和同步能力，不需要额外绑定value属性
2. 统一日期字段的类型，item2.fpInDate统一使用Date类型存储，在数据初始化阶段（比如接口返回后、表格渲染前）就完成字符串转Date的逻辑，不要在模板中调用方法转换
3. 修正清空按钮的赋值逻辑，空字符串和Date类型不匹配，改成赋值null避免类型异常

修改后的HTML代码

<mat-form-field>
    <input [disabled]="!enableEdit" (dateChange)="setChange(item2.dataName,'fpInDate')"
        matInput [matDatepicker]="i" placeholder="Choose a date"
        name="{{i}}--{{n}}"
        [(ngModel)]="item2.fpInDate">
    <button mat-button *ngIf="item2.fpInDate" matSuffix mat-icon-button aria-label="Clear"
        (click)="item2.fpInDate = null">
        <mat-icon>close</mat-icon>
    </button>
    <mat-datepicker-toggle matSuffix [for]="i"></mat-datepicker-toggle>
    <mat-datepicker #i></mat-datepicker>
</mat-form-field>

数据初始化阶段处理示例

// 示例：接口获取表格数据后统一处理日期字段
this.tableData = res.data.map(item => {
  item.fpInDate = item.fpInDate ? new Date(item.fpInDate) : null;
  return item;
})

如果需要自定义输入日期的解析规则（比如单个数字识别为当月的对应日期），可以通过Angular Material提供的DateAdapter自定义解析逻辑，不需要额外修改模板绑定。

内容的提问来源于stack exchange，提问作者Mr.M