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），并且在触发onblur时，错误会正确显示。 2. 01/32/2002不是有效日期，但在这种情况下，日期选择器应改为在2002 02/01/2002年中选择另一个有效日期，而不显示错误。

您知道汤姆如何确保验证在模糊时进行吗？

Answer 1

我强烈建议您删除jQuery datepicker，以使用更现代的Angular datepicker组件。有许多潜在的选择。问题在于这两个框架处理DOM操作的方式本质上是矛盾的。 jQuery在创建后修改DOM，而Angular创建DOM，使其始终处于正确状态，具体取决于您的模型。尽管您仍然可以一起使用它们，但这可能不是最佳的设计方法。

在这种情况下，例如，如果使用ngx Bootstrap's Date-picker component，则可以轻松附加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>

如何使用Datepicker在Angular 5应用中验证日期？

1 个答案: