如何监听matInput的ngx-mat-datetime-picker时间变更事件

方案一：改用dateInput事件替代dateChange #

dateChange事件的触发时机存在延迟，导致你拿到的是旧值。ngx-mat-datetime-picker提供的dateInput事件会在用户完成时间选择（比如点击弹窗确定按钮）时触发，能准确传递最新时间值。

修改模板中的事件绑定：

<input matInput [ngxMatDatetimePicker]="picker" [formControl]="dateControl" 
    (dateInput)="onScheduleDateChanged($event)"
placeholder="Choose a date" [(ngModel)]="element.date" [disabled]="true">

组件类中处理事件：

import { MatDatetimepickerInputEvent } from '@angular-material-components/datetime-picker';

onScheduleDateChanged(event: MatDatetimepickerInputEvent<Date>) {
  const newDate = event.value;
  // 这里拿到的就是最新选择的时间，执行你的业务逻辑
}

方案二：监听FormControl的valueChanges流 #

如果你已经使用了formControl，直接监听它的valueChanges是更可靠的方式，能实时捕获时间变化。

在组件中添加监听逻辑：

import { Subscription } from 'rxjs';

private dateControlSub: Subscription;

ngOnInit() {
  this.dateControlSub = this.dateControl.valueChanges.subscribe(newDate => {
    // 直接获取最新时间值
    this.onScheduleDateChanged(newDate);
  });
}

ngOnDestroy() {
  // 组件销毁时取消订阅，避免内存泄漏
  this.dateControlSub?.unsubscribe();
}

onScheduleDateChanged(newDate: Date | null) {
  if (newDate) {
    // 处理最新时间
    this.element.date = newDate; // 手动同步到element.date
  }
}

注意：Angular不建议同时使用formControl和ngModel，容易导致状态冲突。建议移除模板中的[(ngModel)]，通过valueChanges回调手动同步值到element.date。

补充说明 #

• dateChange事件主要针对输入框手动修改日期的场景，触发时机早于值的更新，因此不适合监听选择器的时间变更。
• 确保你的@angular-material-components/datetime-picker依赖是最新版本，旧版本可能存在事件触发的bug。

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