ngx-bootstrap datepicker 验证无效日期

Question

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

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

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

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

如何获取或保留输入到字段中的原始值？ 我已经尝试过 onChange 事件和valueChanges但ngx-datepicker似乎覆盖了它，因此在您离开该领域之前它不会触发。

Answer 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);

示例堆栈闪电战： https ://stackblitz.com/edit/ngx-bootstrap-datepicker-taconz