使用角度材料日期选择器进行日期验证答案

【问题标题】：Date validation using angular material date picker使用角度材料日期选择器进行日期验证
【发布时间】：2018-11-13 15:57:11
【问题描述】：

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

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

这个可以吗？

【问题讨论】：

面临同样的问题。你找到解决办法了吗？

标签： angular datepicker angular-material

【解决方案1】：

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

你也可以试试 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)">

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}`);
      }
    }

【讨论】：

我看到了，但不幸的是，只有在用户跳出该字段时才会调用它？
这是一个堆栈闪电战。不幸的是 dateInput 和 dateChange 仅在它认为可以解析日期时触发。 stackblitz.com/angular/…
更新了答案，你可以利用我们传统的键盘事件。
谢谢。 keyUp 事件有效。它最终对我们来说很笨重，因为我们有一个通用的页面验证，它只在 a) 字段脏或 b) 用户按下保存时触发。在这种情况下，该字段并不脏，因为它无法解析。我可以用样板代码绕过它，但根据使用的位置数量，它开始变得丑陋。
您的问题陈述说您需要对击键进行验证，对吧？

【解决方案2】：

add [min] and [max] property like below code :-

i added min Date as 2020 (its mean you can not select less than 2020)
I added max Date as 7 day ahead from current date (you can not select after 7day`s ahead future date)

You can change as per your requirement , now you can get the idea to set calender validation    

   <mat-form-field class="full-width">
                <mat-label>Purchase Date</mat-label>
                <input
                  matInput
                  readonly
                  [min]="minDate" 
                  [max]="maxDate"
                  placeholder="Choose a Date"
                  (dateChange)="changeDate($event)"
                  formControlName="date_of_purchase"
                  [matDatepicker]="picker"
                />
                <mat-datepicker-toggle
                  matSuffix
                  [for]="picker"
                ></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
              </mat-form-field>
    
    
    ts
    
      minDate = new Date(2000, 0, 1);
      today = new Date();
      maxDate = new Date();
    
    constructor(
        
        private router: Router,
        
      ) {
        
        this.maxDate = new Date(this.today.setDate(this.today.getDate() + 7));
        this._fillForm();
      }

【讨论】：

material.angular.io/components/input/…