如何使用Datepicker在Angular 5應用中驗證日期？

Question

我有當前模板：

<input type="text" class="datepicker" name="my_date" placeholder="mm/dd/yyyy" #myDate="ngModel" [(ngModel)]="myDate" id="my_date">
<div class="error_message" *ngIf="myDate.errors?.invalidDate">
    Please enter valid date
</div>

我在onInit中有以下代碼：

setTimeout(function () {
      $('.datepicker').datepicker({
        autoclose: true,
        dateFormat: 'MM/dd/yyyy'
      }).on('hide', function(e) {
          $('.datepicker').blur();
      });    
    }, 10);

在保存公司時，我具有驗證邏輯：

if (validateDate(this.myDate) == false) {     
        myFormDirective.form.controls['my_date'].setErrors({'invalidDate': true});
    }   

問題是，當日期無效時，日期選擇器將今天的日期改為onblur。 為了解釋這個問題，我將給出兩種情況：1. 03/10/1800的日期無效（小於1900），並且在觸發onb​​lur時，錯誤會正確顯示。 2. 01/32/2002不是有效日期，但在這種情況下，日期選擇器應改為在2002 02/01/2002年中選擇另一個有效日期，而不顯示錯誤。

你知道湯姆如何確保驗證在模糊時發生嗎？

Answer 1

我強烈建議您刪除jQuery datepicker，以使用更現代的Angular datepicker組件。 有許多潛在的選擇。 問題在於這兩個框架處理DOM操作的方式本質上是矛盾的。 jQuery在創建后修改DOM，而Angular創建DOM，使其始終處於正確狀態，具體取決於您的模型。 盡管您仍然可以一起使用它們，但這可能不是最佳的設計方法。

在這種特定情況下，例如，如果您使用ngx Bootstrap的Date-picker組件 ，則可以輕松地附加on Change事件處理程序。

 import { Component } from '@angular/core'; @Component({ selector: 'demo-datepicker-value-change-event', templateUrl: './value-change-event.html' }) export class DemoDatepickerValueChangeEventComponent { data: Date; showWarning: boolean = false; onValueChange(value: Date): void { if(validateDatepicker(value)) showWarning = false; else showWarning = true; } validateDatepicker(value: Date){ let isValid = false; //Custom validation here... return isValid; } } 

 <div class="row"> <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group"> <input class="form-control" placeholder="Datepicker" bsDatepicker (bsValueChange)="onValueChange($event)"> </div> <div *ngIf="showWarning">Enter a valid date</div> </div>