Question

我正在将Angular与Angular Material（7.0.2）一起使用首先，我只使用了带有验证模式的基本Angular Material输入。输入字段用于日期（YYYY-MM-DD）。通过手动输入日期，验证工作正常。之后，我在输入中添加了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这样的日期在输入中的实际样子。

带有输入验证的角度材质DatePicker

0 个答案: