PrimeNG Table行内编辑问题：验证后无法维持编辑状态

问题描述 #

在Angular中使用PrimeNG Table行内编辑功能时，输入空记录触发验证提示后，行内编辑选项会自动消失，需要保持编辑状态以便用户修正输入。

原因分析 #

PrimeNG的pSaveEditableRow指令默认会在点击保存按钮后，触发行编辑的保存逻辑并退出编辑模式。即使在自定义的onRowEditSave方法中返回，默认的指令行为依然会执行，导致编辑状态退出。

解决方案 #

通过在点击事件中阻止默认行为，中断pSaveEditableRow的默认逻辑，当验证不通过时保持行的编辑状态。

修改步骤： #

1. 更新HTML中的保存按钮，传递点击事件对象到处理函数：

<button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-save" 
        (click)="onRowEditSave(testprocess,ri, $event)" 
        class="p-button-rounded p-button-text p-button-success mr-2"></button>

2. 更新component.ts中的处理函数，在验证失败时调用event.preventDefault()：

onRowEditSave(testdata: testdata, index: number, event: Event) {
  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 
    });
    // 阻止PrimeNG默认的保存后退出编辑行为
    event.preventDefault();
    return;
  }
  
  // 验证通过后的保存逻辑...
}

界面状态说明 #

• 点击编辑前：表格行显示普通视图，操作按钮为编辑和删除
• 点击编辑后：切换到行内编辑模式，操作按钮变为保存和取消，输入框可编辑
• 点击保存后（验证失败）：弹出错误提示，行保持编辑状态，输入框和保存/取消按钮依然可见

内容的提问来源于stack exchange，提问作者Bhushan Khaladkar