How to handle "ERROR Error: InvalidPipeArgument: 'Unable to convert "Invalid Date" into a date' for pipe 'DatePipe'"

Issue

I'm having a condition where the date-time stamp is sometimes null. In those cases my date pipe is failing.

HTML:

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

This runs good untill the dateString in below function is passed null.

TS:

getDateObject(dateString) {
  return moment(dateString).toDate();
}

That's when it starts logging:

ERROR Error: InvalidPipeArgument: 'Unable to convert "Invalid Date" into a date' for pipe 'DatePipe'

Can someone please help me with this. Passing null value is still fine. But the UI should handle this Pipe issue. Please help.

Solution

You need to add a if condition to handle this, that's all, so that null is not passed to the date pipe!

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

Answered By - Naren Murali