CODEWITHSUNDEEP
angularangular2-formsprimeng
Denis Vitez
Denis Vitez

Reputation: 648

PrimeNG Calendar (p-calendar) won't reset manual input

I am using p-calendar in my Angular2 application and I'm experiencing some strange behaviour. If I insert the date value with the help of the calendar widget, it will successfully reset after I'm caling the .reset() function on my form group. The problem I'm getting is that when user enters the date by hand into the calendar input field, it won't get cleared after calling .reset(). If I try to fetch the value of the field it will return the correct default value (null), but input field is still showing the previously inserted value, that was already submitted.

I am using PrimeNG 2.0.6.

Is there anything I can do to reset the value stuck in input field?

Upvotes: 0

Views: 4374

Answers (2)

TheodoreTsg
TheodoreTsg

Reputation: 580

Well after some hours of research and tries in many ways I just found my solution and I hope it will help others. The solution is simple and works for me:

Html

<button class="button button-3 button-3a clear" (click)="clearfilter();">
 <i class="fa fa-close"></i> {{'Clear Filters' | translate}}
</button>
<p-table #dt [columns]="cols" 
             [value]="profitsConfig" 
             [rows]="10" 
             [rowsPerPageOptions]="[5,10,20,50,100]"
             [paginator]="true" 
             [resizableColumns]="true" 
             columnResizeMode="expand" 
             [scrollable]="true"
             [(selection)]="mySelection" 
             selectionMode="multiple" 
             exportFilename="ProfitsConfig"
             [showCurrentPageReport]="true" 
             currentPageReportTemplate="Total: {{dt.totalRecords}}">
    ...
<p-calendar #createCalendar appendTo="body" 
            [(ngModel)]="rangeDatesCreate" 
            *ngSwitchCase="'createdate'"
            selectionMode="range" dateFormat="dd/mm/yy" 
            placeholder="dd/mm/yy - dd/mm/yy"
            (onSelect)="dt.filter($event,col.field, 'dateRangeFilter')" 
            [monthNavigator]="true" [yearNavigator]="true"
            yearRange="1990:2050" [readonlyInput]="true">
</p-calendar>

And when I call the function to clear all my filters:

TypeScript

rangeDatesCreate: Date[];

constructor(){}

clearfilter() {
  this.rangeDatesCreate = null;
  ....
}

So I just set to null the value that is bound with [(ngModel)]. I hope this helps!

Upvotes: 1

Denis Vitez
Denis Vitez

Reputation: 648

I found a solution (workaround). I used ngIf to hide and show form after submiting data. This seems to trigger the field to reset it's value properly.

Upvotes: 0

Related Questions