使用Moment.js在Angular Material日期选择器中显示时间时日期持续变化求助

我来帮你梳理下问题根源，再给出针对性的解决方案：

问题原因分析 #

1. 表单绑定冲突：你在同一个输入框上同时用了ngModel和formControlName，这在Angular响应式表单中是不兼容的组合，会引发双向绑定的冲突，进而导致不必要的更新循环。
2. 时间逻辑循环触发：onDataChange方法里每次都获取实时的当前时间去修改选中的日期，而这个方法又会被ngModelChange频繁触发，导致时间一直在刷新，形成循环更新，最终引发报错。

解决方案 #

方案一：修复响应式表单绑定，保留「选中日期+当前时分秒」逻辑 #

先移除模板里的ngModel和ngModelChange，专注用响应式表单的FormControl处理值变化：

修改后的HTML代码

<mat-form-field class="date" (click)="createAt.open()">
  <input matInput [matDatepicker]="createAt" autocomplete="off" formControlName="createAt" placeholder="Date">
  <mat-datepicker-toggle matSuffix [for]="createAt"></mat-datepicker-toggle>
  <mat-datepicker #createAt></mat-datepicker>
</mat-form-field>

修改后的TS代码

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import * as moment from 'moment';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {
  firstFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单时设置当前完整时间（日期+时分秒）
    this.firstFormGroup = this._formBuilder.group({
      createAt: [moment().toDate()]
    });

    // 监听日期选择变化，只替换日期部分，保留原有时分秒
    this.firstFormGroup.get('createAt')?.valueChanges.subscribe(selectedDate => {
      if (selectedDate) {
        // 获取表单中已存的时分秒
        const currentTime = moment(this.firstFormGroup.get('createAt')?.value);
        // 用选中的日期替换原有日期，保留时分秒
        const updatedDate = moment(selectedDate)
          .hour(currentTime.hour())
          .minute(currentTime.minute())
          .second(currentTime.second())
          .toDate();
        // 用patchValue并关闭事件触发，避免循环更新
        this.firstFormGroup.get('createAt')?.patchValue(updatedDate, { emitEvent: false });
      }
    });
  }
}

方案二：直接使用带时间选择的Datepicker #

如果你需要直接选择「日期+时间」，可以配置支持时间选择的Angular Material Datepicker，省去手动拼接的麻烦：

1. 先确保已导入MomentDateModule（适配Moment.js）：

import { MomentDateModule } from '@angular/material-moment-adapter';

@NgModule({
  imports: [
    // 其他模块导入
    MomentDateModule
  ]
})
export class YourModule {}

2. 修改HTML和TS代码：

HTML代码

<mat-form-field class="date-time">
  <input matInput [matDatepicker]="createAt" formControlName="createAt" placeholder="Date and Time">
  <mat-datepicker-toggle matSuffix [for]="createAt"></mat-datepicker-toggle>
  <mat-datepicker #createAt type="datetime"></mat-datepicker>
</mat-form-field>

TS代码

ngOnInit(): void {
  this.firstFormGroup = this._formBuilder.group({
    createAt: [moment().toDate()] // 初始化当前完整时间
  });
}

这样用户可以直接选择日期和时间，从根源避免时间循环变化的问题。

额外提示 #

• 确保已正确安装并导入Moment.js和Angular Material的相关依赖，避免因模块缺失导致报错。
• 使用响应式表单时，尽量不要混合模板驱动表单的指令（如ngModel），保持代码的一致性和可维护性。

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