javascript - 验证 mat-date 选择器和 mat-time-picker

Question

我正在尝试在日期和时间中为某些情况添加验证错误。

我正在使用 mat-date-picker 和 mat-time-picker。

结构 ：

我有日期、开始时间和结束时间作为输入，我有 4 个条件：

1) if date selected > current date => errors 
2) if date selected == current date and start time > current time => errors
3) if date selected  == current date and end time > current time => errors 
4) if start time > end time for any date => errors

为了实现这个条件，我使用了 4 个布尔值。

默认情况下false：

  validationStartTime: boolean = false;
  validationEndTime: boolean = false;
  validationDate: boolean = false;
  validationStartEndTime: boolean = false;

我的代码：

html:

    <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker" formControlName="date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="validationDate">You cannot use future dates</mat-error>

    </mat-form-field>
  </div>
   
  
  <div class="form-group">


    <mat-form-field class="example-full-width">
      <mat-label>Start Time</mat-label>
      <input matTimepicker formControlName="startTime">

      <mat-error *ngIf="validationStartTime">Start Time must be less than Current Time</mat-error>

    </mat-form-field>


 </div>

 
    <div class="form-group">

    <mat-form-field class="example-full-width">
      <mat-label>End Time</mat-label>
      <input matTimepicker formControlName="endTime">

      <mat-error *ngIf="validationEndTime">End Time must be less than Current Time</mat-error>
      <mat-error *ngIf="validationStartEndTime">Start Time must be less than End Time</mat-error>

    </mat-form-field>

  </div>

组件.ts：

  this.rangeForm = new FormGroup({
    date: new FormControl(new Date(), Validators.required),
    startTime: new FormControl(starttime, Validators.required),  
    endTime: new FormControl(new Date(), Validators.required),
    
  }, {validators: this.DateTimeValidator()});


  DateTimeValidator(): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      const start_time = control.get("startTime").value;
      const end_time = control.get("endTime").value;
      const date = control.get("date").value;

      if(new Date().getTime() < date.getTime()){
        this.validationDate = true;
        console.log("validation date");
        return {date:"You cannot use future dates"}
      }
      else if((new Date().getHours() < start_time.getHours() && new Date().getDate() == date.getDate() && new Date().getMonth() == date.getMonth() && new Date().getFullYear() == date.getFullYear()) || (new Date().getHours() == start_time.getHours() && new Date().getMinutes() < start_time.getMinutes() && new Date().getDate() == date.getDate() && new Date().getMonth() == date.getMonth() && new Date().getFullYear() == date.getFullYear())) {
        this.validationStartTime = true;
        console.log("validation start time");
        return {start:"Start Time must be less than Current Time"}
      }
      else if((new Date().getHours() < end_time.getHours() && new Date().getDate() == date.getDate() && new Date().getMonth() == date.getMonth() && new Date().getFullYear() == date.getFullYear()) || (new Date().getHours() == end_time.getHours() && new Date().getMinutes() < end_time.getMinutes() && new Date().getDate() == date.getDate() && new Date().getMonth() == date.getMonth() && new Date().getFullYear() == date.getFullYear())){
        console.log("validation end time");
        this.validationEndTime = true;
        return {end:"End Time must be less than Current Time"}
      }
      else if(start_time.getHours() > end_time.getHours() || (start_time.getHours() == end_time.getHours() && start_time.getMinutes() > end_time.getMinutes())){
        console.log("validation start end time");
        this.validationStartEndTime = true;
        return {startEnd:"Start Time must be less than End Time"}
      }
    
    }
  }

代码很简单，条件成功应用但html无法显示错误！

像这样 ：

  <mat-error *ngIf="validationEndTime">End Time must be less than Current Time</mat-error>

我做错了什么？

标签： javascriptangularvalidation