angularprimengprimeng-calendar

PrimeNg (v15.x) not clearing validation state when end date cleared after making a selection?

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

Solution

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