为何PrimeNG p-table编辑行报错却仍更新记录？如何解决？

核心思路 #

在保存编辑的逻辑中，先校验表单有效性，只有表单验证通过后才执行数据更新操作；若验证不通过，仅触发Toast错误提示，不修改原数据。

具体修改方案 #

以官方示例代码为基础，通过以下两种方式实现：

方式一：利用ngModel直接校验 #

1. 模板中添加表单验证标记
   给编辑单元格的输入框绑定ngModel并添加验证规则，同时设置模板引用变量：

   <p-cellEditor>
     <ng-template pTemplate="input">
       <input 
         type="number" 
         pInputText 
         [(ngModel)]="rowData.price" 
         #priceInput="ngModel" 
         required 
         min="0"
         pattern="^\d+(\.\d{1,2})?$"
       />
     </ng-template>
     <ng-template pTemplate="output">{{rowData.price}}</ng-template>
   </p-cellEditor>
   

2. 修改保存方法逻辑
   在组件类的onRowEditSave方法中，先校验输入框的有效性，不通过则回滚编辑状态：

   onRowEditSave(event: any) {
     // 获取当前编辑行的输入控件实例
     const priceInput = event.editor.nativeElement.querySelector('[ngModel]')?.ngControl;
     if (priceInput && !priceInput.valid) {
       this.messageService.add({severity:'error', summary:'Error', detail:'Invalid Price'});
       // 回滚到编辑前的状态，阻止数据更新
       event.revert();
       return;
     }
     // 验证通过后执行原有的数据保存逻辑
     // 原示例中的更新代码...
   }
   

方式二：使用FormGroup管理表单（更规范） #

1. 为每行数据创建表单组
   初始化数据时，给每条数据绑定包含验证规则的FormGroup：

   import { FormGroup, FormControl, Validators } from '@angular/forms';
   
   // 假设products是你的数据源
   this.products.forEach(product => {
     product.editForm = new FormGroup({
       price: new FormControl(product.price, [
         Validators.required,
         Validators.min(0),
         Validators.pattern(/^\d+(\.\d{1,2})?$/)
       ])
     });
   });
   

2. 模板绑定表单控件
   将输入框与表单控件绑定：

   <p-cellEditor>
     <ng-template pTemplate="input">
       <input 
         type="number" 
         pInputText 
         [formControl]="rowData.editForm.get('price')"
       />
     </ng-template>
     <ng-template pTemplate="output">{{rowData.price}}</ng-template>
   </p-cellEditor>
   

3. 保存时校验表单组
   在保存方法中先检查表单有效性，不通过则回滚：

   onRowEditSave(event: any) {
     if (!event.data.editForm.valid) {
       this.messageService.add({severity:'error', summary:'Error', detail:'Invalid Price'});
       event.revert();
       return;
     }
     // 验证通过后，将表单值同步到原数据
     event.data.price = event.data.editForm.get('price')?.value;
     // 后续的保存逻辑...
   }
   

关键说明 #

• event.revert()是PrimeNG提供的方法，会将当前编辑行恢复到编辑前的状态，直接阻止错误数据写入原数据集。
• 所有校验逻辑必须放在数据更新操作之前，确保只有合法数据才会被保存。

内容的提问来源于stack exchange，提问作者Tim Kruger