Angular 17中igx-time-picker无法绑定表单值的问题排查

核心问题及修复步骤： #

1. 移除响应式与模板驱动表单的冲突绑定

你在<igx-time-picker>上同时用了[(ngModel)]和formControlName，两种绑定方式不能混用，会导致表单值同步异常。必须移除[(ngModel)]，完全依赖响应式表单的formControlName绑定。

修改后的模板代码：

<div>
  <igx-time-picker #timePicker (valueChange)="selectScheduledTime($event)" mode="dialog" [inputFormat]="'hh:mm'" formControlName="scheduledTime">
    <label igxLabel>Home Time </label>
    <igx-picker-toggle igxSuffix>
      <igx-icon>home</igx-icon>
    </igx-picker-toggle>
    <igx-hint>{{applyForm.get('scheduledTime')?.value?.toLocaleString()}}</igx-hint>
  </igx-time-picker>
</div>

2. 正确注入DatePipe

selectScheduledTime函数里用了datePipe，但组件仅声明变量未注入，调用transform会报错导致函数执行失败。

在组件构造函数中注入DatePipe：

constructor(private datePipe: DatePipe) {
  // 原有代码保持不变
}

同时删除组件中手动声明的datePipe: DatePipe;变量。

3. 使用正确的事件触发函数

Ignite UI时间选择器的变更事件是valueChange而非change，原(change)事件不会触发，导致selectScheduledTime从未执行。将事件改为(valueChange)，直接用$event获取选中值。

4. 匹配表单控件初始值类型

applyForm中scheduledTime初始值是空字符串，但<igx-time-picker>返回Date类型，类型不匹配会引发绑定异常。将初始值改为null或new Date()：

applyForm = new FormGroup({
  // 其他控件保持不变
  scheduledTime: new FormControl<Date | null>(null),
})

5. 优化selectScheduledTime函数

调整逻辑确保值处理正确：

selectScheduledTime(value: Date | null){
  if(value){
    let timeToString = this.datePipe.transform(value, 'hh:mm');
    this.scheduledTime = timeToString;
    console.log("here is time to string " + timeToString);
  }
}

额外注意点： #

• 确认IGX_TIME_PICKER_DIRECTIVES已正确导入，当前imports配置无误。
• 提交表单时，applyForm.value.scheduledTime为Date类型，若需字符串格式，可在submitEvent中用DatePipe转换后再赋值给this.event.scheduledTime。

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