ngx-datatable formArray remove row, desynchronized table values

[enricooliva]

I'm submitting a ...

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
I have a ngx-datatable in binding with a formarray and the single cell are constructed with ng-template ngx-datatable-cell-template.

When I remove one item from the datable and the underline formarray with the follow code, the table became desynchronised.

The form control show a different value respect the underline formgroup.

Expected behavior

When removing item from the table, the column with in binding formcontrol not became desincronized.

Reproduction of the problem

Code deleting the row

let index = this.datarows.indexOf(this.selected[0])
if (index>-1){                        
      this.datarows.splice(index,1);
      this.controls.removeAt(index);

      this.datarows = [...this.datarows];        
      this.controls.patchValue(this.datarows);     
}

• Browser:
  Chrome 67.0

[enricooliva]

I found a workaround

• remove the selected row from the data
• update value of formArray
• remove the last element of formArray

    let index = this.datarows.indexOf(this.selected[0])
    if (index>-1){                        
        this.datarows = [...this.controls.value];                   
        this.datarows.splice(index,1);

        this.controls.patchValue(this.datarows);    
        this.controls.removeAt(this.controls.length-1);             
    }

[nitinkumar8553]

do we have any alternative for this?? i'm facing the same issue when deleting first row it always delete the last one.

[dtarvin]

Whenever I try to remove a row with splice, it always removes the last row, regardless of which row I've clicked.

[SANTOSHKVNSP]

It uses OnPush Change Detection Strategy, so have to bind immutable object to [rows] input or whenever you want to trigger change detection you have to say this.rows = [..this.rows]

[taivu]

i get the same issue with reactive forms and deleting from a formArray with removeAt.

sleuthing around, i found that if i dont use ng-template, the info stays synced when deleting a row, but the flipside is then im not able to edit the field. (im using ng-template for binding to mat-form-field input.

i think the issue could be the way the ng-templates are being referenced, because if i dont use template refs, nothing gets desynced when removing rows.

[taivu]

also found out: if i leave the route and return, the values get updated to the correct thing.
testing this further, i set a boolean variable test in my component, and set an ngIf on the fields that are desynced. if i remove the row, it becomes desynced, but then if i toggle the test variable, it will resync back.

Angular 7.0.4

[waqar-ah]

No Solution yet?

[cassiodsl]

I found another way that works fine :

deleteRow(rowIndex): void {

        this.showTable = false;

        this.getRows().splice(rowIndex, 1);

        setTimeout(() => {
            this.showTable = true;
        }, 10);
    }

And I added a validation on the element:
*ngIf="showTable"

[rafalnowak94]

ugly but works

this.rows.splice(rowIndex, 1);
const data = [...this.rows];
this.rows = [];

requestAnimationFrame(() => {
    this.formArray.removeAt(rowIndex);
    this.rows = data;
});

[louis-neologix]

I've got a really similar problem.

I have a datatable that display a list of categories and for each category a list of sub-items. When I click on a row that contain a category, it toggles the visibility of the sub-items rows.

Within each row, I've got a checkbox and when I click on a category's checkbox, it should check all the sub-items checkboxes. I use formControls to control the state of my checkboxes.

It works well as long as all my categories are expanded but when I close some of them and I use the checkboxes, it doesn't check the correct checkboxes.

I've made an example of my problem here if you want to check it out : https://stackblitz.com/edit/ngx-datatable-formcontrol?file=app/demo-component.ts

[louis-neologix]

OK I've fixed my problem using the [trackByProp]="'id'" property on the datatable.