时间戳

首页 > 解决方案 > 使用角度材料日期选择器进行日期验证

angular - 使用角度材料日期选择器进行日期验证

问题描述

我正在尝试使用材料日期选择器验证日期。具体来说，我要验证的是，当用户在日期字段中键入“abc”时，我想向他们显示“请输入有效日期”。我希望能够在击键时做到这一点，所以当他们输入“a”和“ab”和“abc”时，他们会得到同样的错误。

问题是日期选择器似乎没有设置模型值及其错误，直到该值能够解析为日期。我知道这一点是因为表单控件并不脏，并且在键入“abc”时仍然出现 required 错误。

这可以做到吗？

标签： angulardatepickerangular-material

解决方案

您可以在 mat-datepicker 的输入字段的 onChange 触发的“dateChange”上附加一个处理程序并验证用户输入。

你也可以试试 mat-datepicker 的 'dateInput'。

参考https://material.angular.io/components/datepicker/api#MatDatepickerInput

更新

HTML

<input matInput [matDatepicker]="picker" placeholder="Input & change events"
     (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)" (keyup)="keyEvent('keyUp', $event)">

TS

import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';

    /** @title Datepicker input and change events */
    @Component({
      selector: 'datepicker-events-example',
      templateUrl: 'datepicker-events-example.html',
      styleUrls: ['datepicker-events-example.css'],
    })
    export class DatepickerEventsExample {
      events: string[] = [];

      addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
        this.events.push(`${type}: ${event.value}`);
      }

      keyEvent(type: string, event: KeyboardEvent) {
        this.events.push(`${type}: ${event.target.value}`);
      }
    }

推荐阅读