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

时间:2019-02-22 13:44:58

标签: angular typescript angular-material angular-material-datetimepicker

如何显示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,则我想显示日期应高于01/01/2019 消息。

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

有什么方法可以实现?

1 个答案:

答案 0 :(得分:4)

您可以使用对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 }}