Angular日期输入框按'n'键无法切换为下一天的问题排查

原有问题代码 #

TS文件事件处理函数 #

addDays($event) {
    const date = new Date();
    if ($event.key === 'n') {
      // add a day
      date.setDate(date.getDate() + 1);
    }
  }

HTML模板输入框代码 #

<input matInput id="datePicker-{{rowIndex}}" [matDatepicker]="datePicker" [(ngModel)]="row.date" required maxlength="10" (change)="isOccurrenceDateValid(rowIndex)" 
            class="mat-input-element-style" (keydown)="addDays($event, rowIndex)">

失效原因 #

• 函数参数不匹配：模板中调用addDays传入了$event、rowIndex两个参数，但TS侧函数仅声明接收1个参数，取值逻辑异常
• 操作对象错误：函数内每次都新建当前系统时间的Date实例，没有操作输入框双向绑定的row.date值，且计算完成后没有将新日期赋值回绑定属性，视图无法触发更新
• 未阻止默认行为：输入框聚焦状态下按字符键会默认触发文本输入，不拦截会干扰日期赋值、触发格式校验报错

修复后代码 #

推荐直接传入当前行对象，减少索引查找逻辑：

1. 调整模板传参，将当前row传入事件函数

<input matInput id="datePicker-{{rowIndex}}" [matDatepicker]="datePicker" [(ngModel)]="row.date" required maxlength="10" (change)="isOccurrenceDateValid(rowIndex)" 
            class="mat-input-element-style" (keydown)="addDays($event, row)">

2. 修复TS侧事件处理逻辑

addDays(event: KeyboardEvent, row: {date: Date | string}) {
  // 阻止n键的默认输入行为
  event.preventDefault();
  // 兼容大小写锁定状态，按大写N也能触发
  if (event.key?.toLowerCase() === 'n') {
    // 优先取输入框已绑定的日期，无值时默认取当前日期
    const targetDate = row.date ? new Date(row.date) : new Date();
    // 日期顺延1天
    targetDate.setDate(targetDate.getDate() + 1);
    // 赋值回绑定属性，触发双向绑定更新视图
    row.date = targetDate;
  }
}

如果不想修改模板传参，保留原有rowIndex入参也可以，TS代码调整为从渲染数据源中通过索引取对应行数据即可，核心逻辑和上述一致。

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