Angular 11响应式表单编辑数据时日期控件显示无效日期问题

问题原因 #

你遇到的无效日期报错是因为.NET 5后端返回的日期字段是ISO格式的字符串（例如2024-05-20T14:30:00Z），但ngx-bootstrap的bsDatepicker组件要求绑定的值必须是JavaScript的Date类型对象，字符串类型的日期值无法被组件正常解析，就会触发无效日期提示，同时覆盖你设置的占位符。

解决方案 #

方案1：正常回填原有日期 #

修改组件内获取待编辑预约数据的逻辑，把后端返回的日期字符串转为Date类型再赋值给表单：

this.patientappointmentsService.getApointmentForEdit(this.id).subscribe(
(appointment: INewAppointmentToCreateOrEdit) => {
this.appointmentForms.push(this.fb.group({
          id: [this.id],
          office1Id: [appointment.office1Id, Validators.required],
          patient1Id: [appointment.patient1Id, Validators.required],
          // 把字符串转为Date对象
          startDateAndTimeOfAppointment: [new Date(appointment.startDateAndTimeOfAppointment), Validators.required],
          endDateAndTimeOfAppointment: [new Date(appointment.endDateAndTimeOfAppointment), Validators.required],
          remarks: [appointment.remarks],
          status: [appointment.status, Validators.required]
        }));
  });

如果后端返回的日期可能存在格式异常，可以加一层兜底判断，异常日期赋值为null即可正常显示占位符：

// 组件内新增转换方法
private parseDate(dateVal: any): Date | null {
  const date = new Date(dateVal);
  return isNaN(date.getTime()) ? null : date;
}

// 表单赋值时调用方法
startDateAndTimeOfAppointment: [this.parseDate(appointment.startDateAndTimeOfAppointment), Validators.required],
endDateAndTimeOfAppointment: [this.parseDate(appointment.endDateAndTimeOfAppointment), Validators.required],

方案2：临时仅显示占位符（不回填原有日期） #

如果你现阶段不需要回填原有日期，只需要消除报错显示占位符，直接给日期字段赋值null即可：

startDateAndTimeOfAppointment: [null, Validators.required],
endDateAndTimeOfAppointment: [null, Validators.required],

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