ngx-bootstrap datepicker验证无效日期

Question

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

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

这在技术上是可行的，但除此之外，我想向用户提供有关他们输入日期的某种反馈。具体来说，他们输入的值无效。在这种情况下，它将是09/99/2020。

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

如何获取或保持原始值输入字段？我尝试了一个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">

然后在组件中处理此问题：

 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