防止angular2应用程序因无效日期而崩溃（可能会覆盖DatePipe？）

Question

我基本上有这样的HTML5日期选择器：

<input class="form-control" type="date" [(ngModel)]="startDate" />

另一个区域显示模型中的日期，如下所示：

{{startDate | date:shortDate}}

我不认为这与此问题有关 ，但为了彻底，我在幕后有这样的事情：

private startDate: string;
private endDate: string;

updateDateFilter() {
    let from = new Date(this.startDate);
    let to = new Date(this.endDate);
    **Stuff to filter based on date range**
}

太棒了。还有很多事情要发生，但它可能是无关紧要的细节。

麻烦的是你可以点击日期选择器，然后选择年份并点击删除这样做：

没问题吧？错了，因为Angular2日期管道混淆了，我的整个应用程序在显示这个令人惊讶的有用错误消息后崩溃了：

  

原始例外：无效的参数＆＃39;＆＃39; for pipe＆＃39; DatePipe＆＃39;

解决方案似乎很简单，但我不确定如何解决这个问题。我想我只需要在DatePipe处理之前捕获日期字符串，并确保日期，月份和年份的有效内容。但Angular2确实具有魔力，而且自从使用模型绑定完成后，我没有看到明确的干预途径。

我可能需要覆盖DatePipe，保持其功能，但首先检查字符串。我不知道怎么做。如果您知道如何做，请分享。任何替代方法也会有所帮助。只要日期不完整，我就无法让应用程序崩溃。

谢谢！

Answer 1

您可以创建自己的管道，并扩展默认的DatePipe或只是实例化它并以编程方式调用它。

@Pipe({
  name: 'customDate'
})
export class CustomDatePipe extends DatePipe {
  transform(date: string, pattern?: string): string {
    // validate/initialize date
    return super.transform(date, pattern);
  }
}

或第二种情况：

export class CustomDatePipe {
  private datePipe: DatePipe = new DatePipe();

  transform(date: string, pattern?: string): string {
    // validate/initialize date
    return this.datePipe.transform(date, pattern);
  }
}

没有机会检查这个，但我认为这两种方法都应该有用。