angular - 角度材料日期选择器最小和最大日期验证消息
问题描述
如何在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时,我想显示错误消息!
有什么方法可以实现吗?
解决方案
您可以使用对 ngModel 的引用来了解日期是否有误。
在这个 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 }}
推荐阅读
- fonts - 如何在 UFO 3 中使用组合字符?
- protege - 封闭世界推理师门生
- foreign-keys - Informix - 创建表时创建外键
- python - sklearn.model_selection 无法加载 DLL
- scala - Spark过滤每个单词中的特定字母/字母
- java - java:159: 错误: 没有找到适合 put(String,int) 的方法
- sql - SQL Server:在条件中使用多个条件过滤数据
- android - Android,Firebase 如何从数据库中仅获取布尔数据并对其进行计数
- windows-10 - 启动 Instagram Win10 商店应用
- javascript - 尝试将 $set 与 stringify 一起使用,但它不起作用