0

PrimeNg (v15.x) calendar onSelect not clearing error message & form validation state not reset when initially entering an incorrect value & then clearing the value!

Please see the code snippet below:

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: 'Please make sure that the Start Date comes before the End Date' });
        this.isDateValid = false;
        this.markFormControlsDirty();
    }
    else {
        this.incorrectDateMessage = null;
        this.isDateValid = true;
        this.markFormControlsDirty();
    }
}

...

Capture invalid end date value

enter image description here

Clear out the end date selection

enter image description here

Error Message still displays & submit button is still disabled! Thanks very much.

Update

Video of issue: https://drive.google.com/file/d/1MAs88pOz9_3oiblu3xBz_PfxtYMwzhF_/view?usp=sharing

Tim Kruger
  • 863
  • 2
  • 10
  • 26

1 Answers1

0

For clear, there are different emitters: onClear and onClearClick
I made a simple example in StackBlitz to use those events in calendar component

Berkin Sansal
  • 454
  • 1
  • 5
  • 11
  • that doesn't really work, as if I select a start date 2023/08/29 then add an invalid end date 2023/08/22 the 'NOT VALID' message appears, however if I remove the end date which should be valid as there's only a start date now the 'NOT VALID' message still appears & is not reset to a valid state. – Tim Kruger Aug 28 '23 at 22:45
  • I didn't update your `checkDate()` logic in StackBlitz. In your question there were two issues then. One as in my answer, you need to use **those emitters** from primeng to trigger for clearing purposes. And also you need to update your **if condition** in your `checkDate()` function. `null < startDate` returns `true`, so I updated it in StackBlitz to return `false`, you can check it there. – Berkin Sansal Aug 29 '23 at 07:39
  • Thanks very much @Berkin, but that still doesn't fit my use case as the message still doesn't get set to 'VALID' / cleared in the case when I initially select a start date & then select an end date less than the start date selected, & then after that I clear out the end date. The message displayed after doing the steps mentioned above still displays 'NOT VALID' which I would have assumed would have been cleared or set to it's original state. – Tim Kruger Aug 29 '23 at 12:05
  • Not too sure if this would help, but I've updated my answer with a link to a video showing the issue. – Tim Kruger Aug 30 '23 at 09:02