This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* An example of custom validator on a date string. | |
* Valid date is a string, which is: | |
* 1, in the form of YYYY-MM-DD | |
* 2, later than today | |
* 3, not an invalid value like 2018-20-81 | |
* @param date a date string | |
*/ | |
isMyDateFormat(date: string): string { | |
if (date.length !== 10) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
getErrorMessage(pickerInput: string): string { | |
if (!pickerInput || pickerInput === '' ) { | |
return 'Please choose a date.'; | |
} | |
return this.isMyDateFormat(pickerInput); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form #datePickerForm> | |
<mat-form-field> | |
<input matInput [min]="minDate" [matDatepicker]="picker" placeholder="Choose a date" #pickerInput [formControl]="date"> | |
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> | |
<mat-datepicker #picker></mat-datepicker> | |
<mat-error *ngIf="date.invalid">{{getErrorMessage(pickerInput.value)}}</mat-error> | |
</mat-form-field> | |
</form> |