如何处理Angular DatePipe的"Invalid Date"转换错误？

问题根源 #

当studentInfo?.classRoom?.dob为null时，moment(null)会生成Invalid Date对象，传给Angular的DatePipe时，管道无法识别无效日期，从而抛出报错。

解决方案 #

方法1：修改getDateObject函数，提前过滤无效输入

在TS层处理null或无效日期字符串，返回合法日期或null，避免无效值流入管道：

getDateObject(dateString: string | null): Date | null {
  // 先判断输入是否为空或无效
  if (!dateString) return null;
  
  const momentDate = moment(dateString);
  // 仅返回moment验证通过的合法日期
  return momentDate.isValid() ? momentDate.toDate() : null;
}

然后在模板中添加判断，当返回值为null时显示默认内容：

<div *ngIf="studentInfo?.classRoom?.id;">
  <ng-container *ngIf="getDateObject(studentInfo?.classRoom?.dob) as dobDate">
    {{ dobDate | date: sharedModule.getDateTimeFormat() : sharedModule.getDateTimeZoneDefault(dobDate) }}
  </ng-container>
  <span *ngIf="!getDateObject(studentInfo?.classRoom?.dob)">无日期</span>
</div>

方法2：自定义安全日期管道，封装DatePipe处理异常

创建一个自定义管道，内部处理无效日期的情况，避免直接抛出错误：

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'safeDate'
})
export class SafeDatePipe implements PipeTransform {
  constructor(private datePipe: DatePipe) {}

  transform(value: any, format: string, timezone?: string): string {
    // 校验日期是否有效
    if (!value || !(value instanceof Date) || isNaN(value.getTime())) {
      return '无日期'; // 可根据需求改为空字符串''
    }
    // 调用原生DatePipe处理合法日期
    return this.datePipe.transform(value, format, timezone) || '';
  }
}

使用时替换原生date管道：

<div *ngIf="studentInfo?.classRoom?.id;">
  {{ getDateObject(studentInfo?.classRoom?.dob) | safeDate: sharedModule.getDateTimeFormat() : sharedModule.getDateTimeZoneDefault(getDateObject(studentInfo?.classRoom?.dob)) }}
</div>

方法3：模板层直接前置判断

在模板中先检查dob是否存在，仅当存在时才调用日期转换和管道：

<div *ngIf="studentInfo?.classRoom?.id;">
  {{ studentInfo?.classRoom?.dob ? (getDateObject(studentInfo.classRoom.dob) | date: sharedModule.getDateTimeFormat() : sharedModule.getDateTimeZoneDefault(getDateObject(studentInfo.classRoom.dob))) : '无日期' }}
</div>

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