Inline text editing of Mat table-Edit icon not getting refreshed

Question

I am trying to do inline Editing for mat table . I am following the link https://stackblitz.com/edit/angular-custom-pagination-mat-table?file=src%2Fmain.ts here In page 1 I am editing the second row ( the edit symbol icon changed) without saving the changes I am moving to next page. In the next page, the second row showing like save icon (which was appeared on page 1).

Page 1, 2nd Row:

Page 2, 2nd Row:

I tried to update the index column with pagination, but it is not working. {{this.paginator.pageIndex * this.paginator.pageSize + i}}.

<ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>Name</th>
          <td
            mat-cell
            *matCellDef="let element; let i = index"
            [formGroup]="element"
          >
            <!-- <span [hidden]="VOForm.get('VORows').value[i].isEditable"> -->
            <mat-form-field
              style="width: 70px"
              [appearance]="VOForm.get('VORows').value[i].isEditable? 'none' : 'legacy'"
            >
              <input
                matInput
                type="text"
                formControlName="name"
                [readonly]="VOForm.get('VORows').value[i].isEditable"
              />
            </mat-form-field>
            <!-- </span> -->
          </td>
        </ng-container>

let i=dataIndex is not working.

Kindly share the working solution,as this stackblitz link is the exactly the same thing I requires.

Answer 1

To get the current editing index, we can use the below logic to do the same, updated on the same stackblitz!

const foundIndex = (
  this.VOForm.get('VORows') as FormArray
).controls.findIndex((item: any) => item === element);
if (foundIndex > -1) {
  alert(foundIndex);
}

---

We can use the below code to trigger the isEditable control to be set to true for all form array rows! during the pagination change event!

...
this.paginator.page.subscribe(() => {
  (this.VOForm.get('VORows') as FormArray).controls.forEach((row) => {
    console.log(row);
    row.get('isEditable').patchValue(true);
  });
  ...

stackblitz

We need to do the same logic on select of page, doing a filter, adding a new row, all other subsequent events!

Answer 2

About the code:

We can replace in the .html all the

VOForm.get('VORows').value[i].isEditable

by

element.value.isEditable

Remember that "element" is the formGroup VOForm.get('VORows').at(i)

Equal we can pass the own FormGroup element to the functions EditSVO, SaveSVO and CancelSVO

  EditSVO(element:FormGroup) {
    element.get('isEditable')?.setValue(false);
  }
  SaveVO(element:FormGroup) {
    element.get('isEditable')?.setValue(true);
  }
  CancelSVO(element:FormGroup) {
    element.get('isEditable')?.setValue(true);
  }

Use setValue, not pathValue, pathValue is when we want to change some properties of the formGroup but not all, has no sense pathValue on a FormControl.

If we use strictMode, early get in troubles. The solution is, when create the datasource use

this.dataSource=(this.VOForm.get('VORows') as FormArray)
      .controls.map(x=>x as FormGroup)

We need make "something" with "CancelSVO", because not return the before values. Here we need store the values. We can use a simple array

oldValues:any[]=[];

So, we need pass the "index" to the EditSVO and to the CancelSVO

  EditSVO(element:FormGroup,index:number) {
    if (element.value.isEditable) //to avoid twice click the edit button
    {
        this.oldValues[index]={...element.value} //<--we need a "copy"
                                                 //so use spread operator
        element.get('isEditable')?.setValue(false);
    }
  }
  //then in cancel
  CancelSVO(element:FormGroup,index:number) {
    element.setValue(oldValues[index]);
    //as we get the "oldValues with "isEditable"=true, we needn't give the value
  }

NOTE: There'r another approach that it's only allow edit one row at time, see this old SO with the same advertisment about the "strict mode"