角度材料日期选择器最小和最大日期验证消息

Posted 2023-03-13

【中文标题】角度材料日期选择器最小和最大日期验证消息

【英文标题】：Angular material date-picker min and max date validation messages

【发布时间】：2019-07-16 15:05:49

【问题描述】：

如何在Angular Material Datepicker 中显示最小和最大日期验证错误的验证消息

<input [min]="minDate" [max]="maxDate" matInput [matDatepicker]="picker" [formControlName]="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

<mat-error class="error-message" *ngIf="formgroup.get('date').hasError('required') && (formgroup.get('date').dirty || formgroup.get('date').touched)">Date is Required</mat-error>

此处必需验证已设置。

同样，如果用户键入的日期小于 minDate，我想显示 Date 应该高于 01/01/2019 消息。

我知道如果我们设置 minDate，之前的所有日期都会被禁用。但是在这个应用程序中，我们也允许用户输入日期！因此，当用户输入的日期早于定义的 minDate 时，我想显示错误消息！

有什么方法可以实现吗？

【问题讨论】：

是否要在未设置 minDate 值的情况下显示 minDate 的错误消息？

【参考方案1】：

您可以使用对 ngModel 的引用来了解日期是否有误。

在this stackblitz中，我做了这样你可以看到应用于输入的错误（这样你就可以知道错误），并且在输入时也显示错误错误。

<mat-form-field class="example-full-width">
  <input matInput #input="ngModel" [(ngModel)]="date" [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>

  <mat-error *ngIf="input.hasError('matDatepickerMax')">Date should be inferior</mat-error>

</mat-form-field>

<br><br><br>
 input.errors | json 

【讨论】：

谢谢。它有帮助。我的一个是反应形式！所以我使用了 formgroup.get(field.key).errors | json 代替！我现在可以处理了！谢谢！

注意：当您设置[maxDate] 时，此matDatepickerMax 错误会自动添加到您的表单中。另见github.com/angular/components/blob/master/src/dev-app/…

是否可以设置最大范围和最大日期？