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

Question

I have two dates like one arrivaldate and exitdate .Trying to add custom validation like the exit date not be less than arrival date if its less show error message.Please find the below code.

component.ts file:

  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 };
      }
    };
  }

In Html I'm showing error message:

<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>

The condition works and shows the error message respectively for exit and arrival date but. if arrival date is 11/11/2019 and exit date is 10/11/2019(error message will be shown below exit input field).If i change arrival date as 08/11/2019 (arrival date

what is the problem .how do i solve it.Please help

Answer 1

I solved this problem by clear ,setting and updating values after validateExitDate() and validateArrivalDate() methods.

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();
            }
          }
        };
      }

Same with Arrivaldate function.:)