如何在Ag Grid中对比校验同一行的两个单元格数据

核心实现依赖Ag Grid原生提供的单元格值生命周期钩子，无需额外引入第三方依赖即可完成需求：

实现步骤 #

方案1：列配置valueSetter（推荐） #

valueSetter是Ag Grid提供的「值写入行数据前」触发的钩子，返回true表示允许修改写入，返回false则直接丢弃当前修改，逻辑内聚在列定义中维护更清晰。

// 列定义数组中contract_end的配置项
{
  headerName: '合同结束日期',
  field: 'contract_end',
  type: 'dateColumn',
  editable: true,
  // 核心校验逻辑
  valueSetter: (params) => {
    // 统一转为Date对象避免格式/时区判断误差
    const startDate = new Date(params.data.contract_start);
    const newEndDate = new Date(params.newValue);

    // 先校验两个日期值的合法性
    if (isNaN(startDate.getTime()) || isNaN(newEndDate.getTime())) {
      alert('请输入合法的日期格式');
      return false;
    }

    // 满足结束日期大于开始日期才允许写入
    if (newEndDate > startDate) {
      params.data.contract_end = params.newValue;
      return true;
    }

    alert('合同结束日期必须晚于合同开始日期');
    return false;
  }
}

方案2：全局监听cellValueChanged事件 #

如果需要统一管理全表格所有字段的校验规则，可以用全局事件实现：

// 模板中给ag-grid-angular绑定事件
<ag-grid-angular
  (cellValueChanged)="onCellValueChanged($event)"
  // 其他配置省略
>
</ag-grid-angular>

// 组件内对应事件逻辑
onCellValueChanged(params) {
  // 只校验合同结束日期字段
  if (params.colDef.field !== 'contract_end') return;

  const startDate = new Date(params.data.contract_start);
  const newEndDate = new Date(params.value);
  if (isNaN(startDate.getTime()) || isNaN(newEndDate.getTime()) || newEndDate <= startDate) {
    // 校验不通过直接回滚为旧值
    params.node.setDataValue('contract_end', params.oldValue);
    alert('合同结束日期必须晚于合同开始日期');
  }
}

可选增强：编辑过程实时提示 #

如果需要用户选择日期时就实时提示校验结果，可以在列配置中追加编辑器校验参数：

// contract_end列配置追加cellEditorParams
cellEditorParams: {
  validator: (selectedDate: Date) => {
    const startDate = new Date(this.gridApi.getFocusedCell().rowNode.data.contract_start);
    return selectedDate > startDate ? null : { invalidDate: '结束日期需晚于开始日期' };
  }
}

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