如何在 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 should be higher than 01/01/2019 消息。
我知道如果我们设置 minDate,所有以前的日期都将被禁用。但是在这个应用程序中,我们也允许用户输入日期!因此,当用户输入早于定义的 minDate 的日期时,我想显示错误消息!
有什么办法可以实现吗?
最佳答案
您可以使用对 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 }}
关于Angular Material 日期选择器最小和最大日期验证消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54828459/