Angular项目中Chrome/Edge手动输入日期时输入框重置问题

问题根源 #

你的代码里用[ngModel]绑定了经过date:'yyyy-MM-dd'管道格式化后的值，同时手动通过(ngModelChange)赋值。这种写法会引发冲突：

• 手动输入过程中（比如输入到05/20/20阶段），输入的字符串不符合yyyy-MM-dd格式，管道无法正确格式化，导致Angular同步值时触发输入框重置。
• Chrome/Edge对原生date输入框的中间不合法输入状态处理更严格，而Firefox兼容性更好，所以只有前者出现问题。

解决方案 #

1. 改用原生双向绑定，移除管道和手动ngModelChange

直接绑定原始Date对象，让浏览器的原生date输入组件自己处理显示与输入的格式转换（它会根据用户本地设置显示，但底层值保持ISO格式）：

<input 
  [disabled]="viewMode" 
  type="date" 
  name="txtDateReceived" 
  class="form-control" 
  [(ngModel)]="newPayment.DateReceived" 
  required 
/>

这里的[(ngModel)]会自动完成双向绑定：输入框的ISO格式字符串会被Angular转成Date对象赋值给newPayment.DateReceived，反之Date对象也会被正确渲染到输入框中。

2. 初始化Date对象（避免初始值异常）

如果newPayment.DateReceived初始是字符串或空值，在组件初始化时做处理：

ngOnInit() {
  if (this.newPayment.DateReceived) {
    // 字符串转合法Date对象
    this.newPayment.DateReceived = new Date(this.newPayment.DateReceived);
  } else {
    // 初始化为null，让输入框显示为空
    this.newPayment.DateReceived = null;
  }
}

3. 可选：自定义输入校验（按需添加）

如果需要更严格的输入控制，可以监听input事件保留合法值：

<input 
  [disabled]="viewMode" 
  type="date" 
  name="txtDateReceived" 
  class="form-control" 
  [(ngModel)]="newPayment.DateReceived" 
  (input)="validateDateInput($event)"
  required 
/>

组件内方法：

validateDateInput(event: Event) {
  const inputEl = event.target as HTMLInputElement;
  if (inputEl.value && !this.isValidDate(inputEl.value)) {
    // 输入不合法时，回退到上一个有效值
    inputEl.value = this.newPayment.DateReceived 
      ? this.newPayment.DateReceived.toISOString().split('T')[0] 
      : '';
  }
}

isValidDate(dateStr: string): boolean {
  const date = new Date(dateStr);
  return date instanceof Date && !isNaN(date.getTime());
}

为什么这样有效 #

原生date输入框会自动处理用户输入的本地格式（比如MM/DD/YYYY）与ISO格式的转换，Angular的双向绑定直接对接Date对象，避免了管道格式化对中间输入状态的干扰，从根源解决了Chrome/Edge中的重置问题。

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