p-table reset() causes errors in filter value binding

[jimmycartrette]

I'm submitting a ... (check one with "x")

[ X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://primeng-tablefilter-demo-h7jrf9.stackblitz.io/

Current behavior
Calling reset on the p-table causes the value for columnfilters to generate an error

Expected behavior
No error

Minimal reproduction of the problem with instructions
Click Reset Filters on stackblitz

• PrimeNG version: 5.X
  Primeng 11.0.0-rc1

[ips219]

Same problem detected here with 11.0.0

It seems that model for the filter is stored directly in filters object of the table

primeng/src/app/components/table/table.ts

Line 4096 in b04aa55

this.dt.filters[this.field] = this.display == 'row' ? {value: null, matchMode: defaultMatchMode} : [{value: null, matchMode: defaultMatchMode, operator: this.operator}];

Then when table is cleared after reset model is destroyed... From the UI, it can be recovered by clicking on clear button on the column filter menu, but programatically it seems to be difficult to implement a workaround (clear method should be executed on each column filter instance).

[Cito]

Just wanted to report the same and created a Stackblitz case, then found this issue.

Here is my Stackblitz if it helps: https://primeng-issue-9750.stackblitz.io

The problem still exists in PrimeNG 11.1.0.

I think it is caused by changing the filterConstraint that is an input for the ColumnFilterFormElement, but it has no ngOnChange to notice that change.

[Cito]

I'm currently using the following workaround:

in the template:

 <p-table #table ...>
   <ng-template pTemplate="header">
     <tr><th>heading</th>...<tr>
     <tr *ngIf="showFilters"><th>filter</th></tr>
  </ng-template>
  ...
</p-table>

in the component:

  showFilters = true;
  
  @ViewChild('table') table: Table;
  
  constructor(private cd: ChangeDetectorRef) { }
  
  resetTable(): {
    this.showFilters = false;
    this.cd.detectChanges();
    table.reset();
    table.saveState();
    this.showFilters = true;
    this.cd.detectChanges();
  }

I.e. I remove the filters temporarily while resetting the table and add them back afterwords. This will instantiate the filter components newly and they will work just fine. The problem only appears if you reset the table while the filter components are still alive.

[denny99]

Another issue is here:

<ng-container *ngTemplateOutlet="filterTemplate; context: {$implicit: filterConstraint.value, filterCallback: filterCallback}"></ng-container>
</ng-container>
<ng-template #builtInElement>
    <ng-container [ngSwitch]="type">
        <input *ngSwitchCase="'text'" type="text" pInputText [value]="filterConstraint?.value" (input)="onModelChange($event.target.value)"

For the default Inputs the filterContraint is optionally chained. For the filterTemplate not, which causes another error when resetting the table state.

[sadnahu]

this.table.filters = {}; add this above of table clear or reset

[danbanswer]

this.table.filters = {}; add this above of table clear or reset

Thank you @sadnahu !! I don't understand what's going on enough to reopen this or enter a new bug, but even after upgrading to 13.3.3 I was still getting an error in on ModelChange() when typing in the filter's input box:

    onModelChange(value) {
        this.filterConstraint.value = value;

since this.filterConstraint was undefined. After adding Sadnahu's line of code, the filter is working.