angular - ngx-bootstrap datepicker 验证无效日期

Question

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

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

此技术有效，但另外，我想就用户输入的日期向用户提供某种反馈。具体来说，输入的值无效。在这种情况下，它将是 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);

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