Блог

я пытаюсь добавить ошибки проверки для некоторых случаев в дату и время.

я использую средство выбора даты и времени.

Структура :

у меня есть дата, время начала и время окончания в качестве входных данных, и у меня есть 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() amp;amp; new Date().getDate() == date.getDate() amp;amp; new Date().getMonth() == date.getMonth() amp;amp; new Date().getFullYear() == date.getFullYear()) || (new Date().getHours() == start_time.getHours() amp;amp; new Date().getMinutes() < start_time.getMinutes() amp;amp; new Date().getDate() == date.getDate() amp;amp; new Date().getMonth() == date.getMonth() amp;amp; 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() amp;amp; new Date().getDate() == date.getDate() amp;amp; new Date().getMonth() == date.getMonth() amp;amp; new Date().getFullYear() == date.getFullYear()) || (new Date().getHours() == end_time.getHours() amp;amp; new Date().getMinutes() < end_time.getMinutes() amp;amp; new Date().getDate() == date.getDate() amp;amp; new Date().getMonth() == date.getMonth() amp;amp; 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() amp;amp; 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>
 

Что я делаю не так?