[英]Angular Material datepicker custom date(start and end date ) validation issue
我有两个日期,例如一个到达日期和退出日期。尝试添加自定义验证,例如退出日期不小于到达日期,如果其显示错误消息较少。请找到以下代码。
component.ts 文件:
arrivalDate: ['', [Validators.required, this.validateArrivalDate()]],
exitDate: ['', [Validators.required, this.validateExitDate()]],
validateExitDate(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
if (this.currentTravelFormGroup !== undefined) {
//const arrivalDate = control.value;
const exitDate = this.currentTravelFormGroup.controls['exitDate'].value;
const arrivalDate = this.currentTravelFormGroup.controls['arrivalDate'].value
if (exitDate <= arrivalDate) return { requiredToDate: true };
}
};
}
validateArrivalDate(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
if (this.currentTravelFormGroup !== undefined) {
const exitDate = this.currentTravelFormGroup.controls['exitDate'].value;
const fexitDate = new Date(exitDate);
const arrivalDate = this.currentTravelFormGroup.controls['arrivalDate'].value;
if (fexitDate <= arrivalDate) return { requiredFromDate: true };
}
};
}
在 Html 中,我显示错误消息:
<mat-error *ngIf="currentTravelFormGroup.get('arrivalDate').hasError('requiredFromDate')">Please provide a valid arrival date</mat-error>
<input class="form-control bgColor" [matDatepicker]="pickerExitDateFromGermany" placeholder="MM/DD/YYYY" [min]="minStartDateFutureTravel" [max]="maxStartDateFutureTravel" formControlName="exitDate" id="exitDate" readonly (click)="pickerExitDateFromGermany.open()"
[ngClass]="{ 'is-invalid': submitted && travelDet.exitDate.errors }">
<mat-datepicker #pickerExitDateFromGermany></mat-datepicker>
<mat-error *ngIf="currentTravelFormGroup.get('exitDate').hasError('requiredToDate')">Please provide a valid exitdate</mat-error>
该条件有效并分别显示退出和到达日期的错误消息。 如果到达日期是 11/11/2019 并且退出日期是 10/11/2019(错误消息将显示在退出输入字段下方)。如果我将到达日期更改为 08/11/2019(到达日期)
是什么问题。我该如何解决。请帮忙
我通过在 validateExitDate() 和 validateArrivalDate() 方法之后清除、设置和更新值解决了这个问题。
validateExitDate(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
if (this.currentTravelFormGroup !== undefined) {
//const arrivalDate = control.value;
const exitDate = this.currentTravelFormGroup.controls['exitDate'].value;
const arrivalDate = this.currentTravelFormGroup.controls['arrivalDate'].value
if (exitDate <= arrivalDate) return { requiredToDate: true };
else{
this.currentTravelFormGroup.get('exitDate ').clearValidators();
this.currentTravelFormGroup.get('exitDate').updateValueAndValidity();
}
}
};
}
与 Arrivaldate 函数相同。:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.