ngx-bootstrap datepicker 验证无效日期答案

【问题标题】：ngx-bootstrap datepicker validate invalid datengx-bootstrap datepicker 验证无效日期
【发布时间】：2020-06-24 20:45:50
【问题描述】：

当输入无效日期时，我想保存或保留输入的值，以便将其显示给用户。我该怎么做？

背景：我使用的是 ngx-bootstrap v5.1.0 datepicker 和 angular 7.2.15。当日期无效时（例如：09/99/2020 使用 MM/DD/YYYY），当我离开输入字段时，它会自动将字符串“无效日期”放入输入框中。

这种技术很有效，但另外，我想给用户一些关于他们输入的日期的反馈。具体来说，输入的值无效。在这种情况下，它将是 2020 年 9 月 99 日。

我可以触发无效日期验证，但我无法获得最初输入的日期值，因此用户知道他们输入的内容以及无效的原因。

如何获取或保留输入到字段中的原始值？我尝试了 onChange 事件和valueChanges，但ngx-datepicker 似乎覆盖了它，所以在你离开现场之前它不会触发。

【问题讨论】：

标签： angular datepicker ngx-bootstrap

【解决方案1】：

ngx-bootstrap-datepicker 有一个自定义输出事件bsValueChange

将输出添加到您的 HTML input 元素：

  <input type="text"
        class="form-control"
        [minDate]="minDate"
        [maxDate]="maxDate"
        #dp="bsDatepicker"
        (bsValueChange)="onDateChange($event)"
        bsDatepicker [(bsValue)]="myDateValue">

然后在你的组件 ts 中处理这个：

 myDateValue: Date;
  previousDate: Date;

  ngOnInit() {
    this.myDateValue = new Date();
  }

  onDateChange(newDate: Date) {
    this.previousDate = new Date(newDate);

stackblitz 示例：https://stackblitz.com/edit/ngx-bootstrap-datepicker-taconz

【讨论】：

谢谢。我没有意识到它有自定义的输出事件，所以这非常有帮助。我仍然想提供反馈，如果用户输入 2020 年 9 月 99 日，那么它会告诉他们这是他们输入的内容。示例：“无效日期，您输入 9/99/2020”。由于类型是日期，因此您的 stackblitz 示例中的无效日期始终显示为 Wed Dec 31 1969 18:00:00 GMT-0600（中部标准时间），因为实际日期值为空。我需要捕获字符串，但我不确定如何/是否可以做到这一点？
@Sandy 没有简单的方法可以做到这一点。由于 bsDatepicker 自动将 null 应用于键入的日期并且不能转换为标准日期（从它创建日期时默认为 0，这是该日期的来源）。您可以通过应用一个 keyup 事件处理程序 (keyup)=updateText($event) 然后手动更新一个字符串来跟踪这一点来做到这一点，但是这样做时您会遇到各种错误。
我也是这么想的，但我想我会检查一下。感谢您的回复。