如何为Angular可编辑表格添加数据校验规则

下面是可直接落地的修改步骤：

1. 定义校验规则与状态变量 #

首先在 app.component.ts 中新增字段校验规则配置、错误状态存储变量：

// 各字段校验规则配置，新增其他字段校验直接扩展该对象即可
private readonly fieldValidators: Record<string, (val: string) => boolean> = {
  // carbohydrates仅允许输入整数、小数，为空也暂通过（可按需调整）
  carbohydrates: (val) => val === '' || /^\d*(\.\d+)?$/.test(val)
};
// 存储当前编辑项的校验错误信息
editError: string | null = null;

2. 改造编辑态模板 #

修改表格单元格的编辑态模板，绑定输入校验事件、给保存按钮加禁用逻辑：

<ng-container *ngIf="editingRow === row.id && editingColumn === col.key; else viewTemplate">
  <input 
    type="text" 
    [(ngModel)]="row[col.key]"
    (input)="onEditInputChange(col.key, row[col.key])"
    [class.error-border]="editError"
  >
  <div *ngIf="editError" class="error-tip">{{editError}}</div>
  <div class="edit-actions">
    <button (click)="saveEdit()" [disabled]="!!editError">保存</button>
    <button (click)="cancelEdit()">取消</button>
  </div>
</ng-container>

3. 实现校验逻辑与保存兜底校验 #

在 app.component.ts 中新增输入监听方法，同时修改原有保存逻辑增加兜底校验：

// 编辑输入时实时校验
onEditInputChange(fieldKey: string, inputValue: string) {
  this.editError = null;
  const validator = this.fieldValidators[fieldKey];
  if (validator && !validator(inputValue)) {
    this.editError = `${fieldKey} 仅允许输入数字`;
  }
}

// 原有保存方法修改，增加兜底校验
saveEdit() {
  // 校验不通过直接拦截保存操作
  if (this.editError) return;
  // 你原有的保存逻辑保持不变
  this.editingRow = null;
  this.editingColumn = null;
}

// 取消编辑时清空错误状态
cancelEdit() {
  this.editError = null;
  // 你原有的取消逻辑保持不变
  this.editingRow = null;
  this.editingColumn = null;
}

4. 可选新增错误提示样式 #

在对应组件的css文件中添加错误状态样式，优化用户感知：

.error-border {
  border: 1px solid #f5222d;
  background: #fff1f0;
}
.error-tip {
  color: #f5222d;
  font-size: 12px;
  margin: 4px 0;
}

如果后续需要新增其他字段的校验规则，只需要在 fieldValidators 对象中追加对应字段的校验函数即可，无需修改核心逻辑。

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