时间戳

首页 > 解决方案 > 带有输入验证的 Angular Material DatePicker

angular - 带有输入验证的 Angular Material DatePicker

问题描述

我正在使用 Angular 和 Angular Material (7.0.2) 首先我只是使用了带有验证模式的基本 Angular Material 输入。输入字段适用于 (YYYY-MM-DD) 之类的日期。通过手动输入日期，验证工作正常。之后，我在输入中添加了一个 Datepicker。因此，您可以手动输入日期，也可以通过 datepicker 输入日期。但在那之后，验证总是认为输入是通过手动还是通过 datepicker 发生的都不正确，输入字段仍然是红色突出显示的。

这是输入框

     <mat-form-field class="input-date">
        <input id="search-form-field-input-date-from" matInput #date
               [formControl]="dateFormControlFrom" required placeholder="Date (YYYY-MM-DD)"
               [matDatepicker]="datePickerFrom"
               pattern="^(?:\d{4}-(?:(?:(?:(?:0[13578]|1[02])-(?:0[1-9]|[1-2][0-9]|3[01]))|(?:(?:0[469]|11)-(?:0[1-9]|[1-2][0-9]|30))|(?:02-(?:0[1-9]|1[0-9]|2[0-8]))))|(?:(?:\d{2}(?:0[48]|[2468][048]|[13579][26]))|(?:(?:[02468][048])|[13579][26])00)-02-29)$"
        >
        <mat-datepicker-toggle matSuffix [for]="datePickerFrom"></mat-datepicker-toggle>
        <mat-datepicker #datePickerFrom></mat-datepicker>
      </mat-form-field>

验证功能：

private validateFormInput(): boolean {
    return this.dateFormControlFrom.valid;
}

当我这样做时，我还注意到：

console.log(this.dateFormControlFrom.value)

我得到的日期不像Fri Nov 16 2018 00:00:00 GMT+0100它2018-11-16在输入中的实际样子。

标签： angularvalidationdatepickerangular-material

解决方案

推荐阅读