[英]Angular material date-picker min and max date validation messages
如何在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的引用來確定日期是否有誤。
在本次“閃電戰”中 ,我做到了這一點,以便您可以看到應用於輸入的錯誤(以便您可以知道錯誤),並在輸入錯誤時顯示錯誤。
<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 }}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.