NgMatero DateTimePicker在不同组件中表现不一致问题

问题原因 #

两种组件用法的核心差异在于表单控件的绑定方式和上下文：

• 第一种仅绑定[control]，属于独立的FormControl，没有表单组（FormGroup）的上下文。当输入无效值（比如"1"）触发blur时，NgMatero的默认解析逻辑会直接抛出mtxdatetimeparse错误，因为无法将"1"解析为合法日期。
• 第二种同时绑定了formControlName和[control]，存在重复绑定的问题。表单组上下文会覆盖部分控件的解析逻辑，NgMatero内部对表单组内的控件做了兼容处理，将无效输入"1"自动转换为基于时间戳的默认日期对象，而非直接抛出错误。

版本降级无效说明这不是版本bug，而是组件用法和内部逻辑差异导致的行为不一致。

解决方案 #

1. 统一控件绑定方式 #

不要同时使用formControlName和[control]，二选一即可：

• 若在FormGroup内，只用formControlName：

<date-time-picker 
  type="date"
  formControlName="dateInserted"
  (valueChange)="onDateChange($event)"
></date-time-picker>

• 若为独立控件，只用[control]：

<date-time-picker
  type="date"
  [control]="value"
></date-time-picker>

2. 自定义解析器统一规则 #

通过自定义MtxDateParser，统一输入值的解析逻辑，确保两种场景处理一致。比如对无效输入返回null，避免自动转换或报错：

import { MtxDateParser } from '@ng-matero/extensions/datetimepicker';

export class CustomDateParser extends MtxDateParser {
  parse(value: any): Date | null {
    const validDate = new Date(value);
    // 无效输入返回null，而非自动转换或抛出错误
    return isNaN(validDate.getTime()) ? null : validDate;
  }
}

在模块中注入自定义解析器：

import { NgModule } from '@angular/core';
import { MTX_DATE_PARSER } from '@ng-matero/extensions/datetimepicker';
import { CustomDateParser } from './custom-date-parser';

@NgModule({
  providers: [
    { provide: MTX_DATE_PARSER, useClass: CustomDateParser }
  ]
})
export class YourModule { }

3. 添加统一验证逻辑 #

在FormControl中添加自定义验证器，对输入值校验，确保错误处理一致：

import { FormControl, Validators } from '@angular/forms';

// 自定义日期验证器
const dateValidator = (control: FormControl) => {
  const value = control.value;
  if (!value) return null;
  const date = new Date(value);
  return isNaN(date.getTime()) ? { invalidDate: true } : null;
};

// 独立控件初始化
this.value = new FormControl('2023-06-19', [Validators.required, dateValidator]);

// 表单组内控件初始化
this.form = new FormGroup({
  dateInserted: new FormControl(null, [Validators.required, dateValidator])
});

通过以上步骤，可确保两种用法下的DateTimePicker组件行为完全一致，避免出现一种报错、一种自动转换的情况。

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