PrimeNG Table: unable to keep in editable mode

Question

I am working on PrimeNG Table inline editing functionality in angular. If I enter blank record in the input box I throw an validation message but once message is shown inline edit option disappears. I want to keep inline editing as is.

HTML page

<div>
    <p-table [value]="items" dataKey="extDataId" editMode="row" [tableStyle]="{'min-width': '50rem'}"
    styleClass="p-datatable-responsive-demo">
        <ng-template pTemplate="header">
          <tr class="grid">
            <th  class="column-width-17" l10nTranslate></th>           
            <th  class="column-width" l10nTranslate>Testdata</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-testprocess let-editing="editing" let-ri="rowIndex">
            <tr [pEditableRow]="testprocess">
                <td>
                    <div class="flex align-items-center justify-content-center gap-2">
                        <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(testprocess)" class="p-button-rounded p-button-success p-button-text"></button>
                        <button *ngIf="!editing" pButton pRipple type="button"  icon="pi pi-trash" (click)="onRowDelete(testprocess,ri)" class="p-button-rounded p-button-success p-button-text"></button>
                        <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-save" (click)="onRowEditSave(testprocess,ri)" class="p-button-rounded p-button-text p-button-success mr-2"></button>
                        <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(testprocess,ri)" class="p-button-rounded p-button-text p-button-success"></button>
                    </div>
                </td>
             
                <td [title]="testprocess.test" class="t-ellipsis">
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <span class="p-input-icon-right">
                                <i class="pi pi-times" (click)="cleartestdata(ri)" style="margin-right: -16px;"></i>
                                <input id="email1" class="col-input-grid-100" type="text" maxlength="59" pInputText [(ngModel)]="testprocess.testdata">
                              </span>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{testprocess.testdata}}
                        </ng-template>
                    </p-cellEditor>
                </td>
            </tr>
        </ng-template>
      </p-table>
</div>

component.ts

onRowEditSave(testdata: testdata,index: number) {
  this.validate= this.fieldValidation(testdata);

  if(this.validate==1)
  {
    this.messageService.add({ severity: 'error', detail: this.translationService.translate('Must Fill atleast One Field'), closable: false, life: 5000 });
    return;
  }
    
}

Before clicking on edit

After click on Edit

After click on save. displays message but editing mode disappears

Answer 1

I have used @ViewChild. Below code worked for me

component.ts

import { Table } from 'primeng/table';

@ViewChild(Table)
private dataTable!: Table;


public onRowEditInit(data:DataModel) {
        this.dataTable.editingRowKeys = {[data.id]:true}
}