Question

我正在尝试为matDatepicker实现日期验证，并且大多数情况下都会显示错误消息。错误消息通过插值显示在变量raiseError上。

我正在尝试捕获错误情况，其中用户可能将开始日期设置为大于结束日期。但是，如果开始日期是>结束日期，则不会显示错误消息。

我的HTML代码：

<mat-form-field>
<mat-label>Start Date</mat-label>
<input matInput [(ngModel)]="searchEndDate" 
                [min]="minDate" [max]="maxDate"
                (dateChange)="validateDates($event)" (dateInput)="defaultErrorMessage()" 
                [matDatepicker]="picker">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
              <mat-error *ngIf="raiseError != null">{{raiseError}}</mat-error>
</mat-form-field>
<mat-form-field>
              <mat-label>End Date</mat-label>
              <input matInput [(ngModel)]="searchEndDate" 
                [min]="minDate" [max]="maxDate"
                (dateChange)="validateDates($event)" (dateInput)="defaultErrorMessage()" 
                [matDatepicker]="picker2">
              <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
              <mat-datepicker #picker2></mat-datepicker>
              <mat-error *ngIf="raiseError != null">{{raiseError}}</mat-error>
</mat-form-field>

随附的ts文件（如果存在问题的位置，请参阅最后的else）：

defaultErrorMessage():void {
    console.log('DEFAULTING ERROR MESSAGE')
    this.raiseError = null
  }

  validateDates($event) {
    console.log($event)
    if ($event.value === null){
      this.raiseError = 'The value entered must be a date (MM-DD-YYYY)'
    }
    else if ($event.value < this.minDate){
      this.raiseError = 'You cannot search for results before ' + this.minDate.toLocaleDateString()
    }
    else if ($event.value > this.maxDate){
      this.raiseError = 'You cannot search for results in the future'
    }
    else if (this.searchStartDate > this.searchEndDate) {
      //Even though this statement evaulates to true, it wont show the error message
      // even though the error message for previous if conditions do display
      this.raiseError = 'Search Start Date cannot be after Search End Date'
      console.log(this.raiseError)
    }
    console.log(this.searchStartDate.toLocaleDateString())
    console.log(this.searchEndDate.toLocaleDateString())
  }

感谢您的关注和期待的帮助

编辑：它正在解决以下问题：

开始日期>结束日期不起作用：

Answer 1

我刚刚检查了一个材料设计演示，并根据我的观察结果：

在物料日期选择器中，因为您指定了最小和最大日期，所以仅启用了日期。

就像您设置日期一样

 const currentYear = new Date().getFullYear();
 this.minDate = new Date(currentYear - 5, 0, 1); // 5 years back from current year
 this.maxDate = new Date(currentYear + 1, 11, 31); // 1 year in future

因此只能在mat-datepicker中选择日期b / w的最大和最小日期。（从上面的代码中，就好像我可以检查今天的日期，即2015年至2021年的黑白日期）

并按照您的逻辑

else if ($event.value < this.minDate){  // value will always be greater than min as you can select from the range. value will always be greater than min date
  this.raiseError = 'You cannot search for results before ' + this.minDate.toLocaleDateString()
}
else if ($event.value > this.maxDate){ // same as value can be selected b/w range value will be less than max date
  this.raiseError = 'You cannot search for results in the future'
}

//值始终是黑白的最小和最大日期

我建议您可以为2个日期选择器设置2个不同的最小值和最大值

就像日期选择器之一发生更改一样，请相应地更新其他日期选择器的最小最大值。

就像如果我选择2020年5月24日作为开始日期，那么在其他日期选择器中，2020年5月24日可以是最小日期值，反之亦然，如果我先选择结束日期，则第一个日期选择器的最大日期可以是该值< / p>

Angularv9-垫错误：插值字符串值将无法呈现

1 个答案: