Angular Material datepicker 自定义日期（开始和结束日期）验证问题答案

【问题标题】：Angular Material datepicker custom date(start and end date ) validation issueAngular Material datepicker 自定义日期（开始和结束日期）验证问题
【发布时间】：2019-12-20 17:26:54
【问题描述】：

我有两个日期，例如一个到达日期和退出日期。尝试添加自定义验证，例如退出日期不小于到达日期，如果它较少显示错误消息。请查找以下代码。

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（错误消息将显示在退出输入字段下方）。如果我将到达日期更改为 2019 年 8 月 11 日（到达日期

这是什么问题。我该如何解决。请帮忙

【问题讨论】：

标签： javascript angular-material angular7

【解决方案1】：

我通过在 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 函数相同。:)

【讨论】：