PrimeNg(v15.x) Calendar清除日期后未重置验证状态与错误信息问题

开发者阿泽

2026-7-12

PrimeNG v15.x Calendar组件日期验证异常问题

使用PrimeNG v15.x的Calendar组件时遇到以下问题：当输入无效日期（如结束日期早于开始日期）后，清除日期值，onSelect事件未触发错误提示清除操作，表单验证状态也未重置，导致提交按钮始终处于禁用状态。

代码片段

example-detail.component.html

<p-calendar id="startDate" name="startDate" showIcon="true" inputId="navigators"
    [(ngModel)]="model.startDate" [inline]="false" dateFormat="yy/mm/dd" required="true" showButtonBar="true"
    [monthNavigator]="true" [yearNavigator]="true" yearRange="2015:2050" (onSelect)="checkDate()">
</p-calendar>
<label>Start Date</label>

...

<p-calendar id="endDate" name="endDate" showIcon="true" inputId="navigators" [(ngModel)]="data.endDate"
    [inline]="false" dateFormat="yy/mm/dd" required="false" showButtonBar="true" [monthNavigator]="true"
    [yearNavigator]="true" yearRange="2015:2050" (onSelect)="checkDate()">
</p-calendar>
<label>End Date</label>

example-detail.component.ts

checkDate() {
  if (isUsable(this.data.endDate)) {
      if (this.data.endDate < this.data.startDate) {
          this.messageService.add({ key: 'date', severity: 'error', summary: '', detail: '请确保开始日期早于结束日期' });
          this.isDateValid = false;
          this.markFormControlsDirty();
      }
      else {
          this.incorrectDateMessage = null;
          this.isDateValid = true;
          this.markFormControlsDirty();
      }
  }
}