Angular中ag-grid如何限制min值不大于max值及反向限制？

假设我们有如下数据结构用于ag-grid：

{
  data: [
    {
      id: '0',
      one_min: 23,
      one_max: 42,
      two_min: 1,
      two_max: 5,
    },
    {
      id: '1',
      one_min: 20,
      one_max: 40,
      two_min: 10,
      two_max: 15,
    }
  ]
}

我们通过以下方式动态创建columnDefs：

export class SomeComponent implements OnInit {
  @Input() data!: any[];
  columnDefs: ColDef = [];

  ngOnInit() {
    this.data.forEach(data => Object.keys(data).forEach(key => {
      this.columnDefs.push({
        field: key,
        editable: true,
        // 其他配置
      })
    }))
  }
}

现在需要实现：识别one、two这类字段组，确保编辑时min值不大于对应组的max值，max值不小于对应组的min值。表格最终呈现为2行4列：

解决方案 #

可以利用ag-grid中ColDef的valueSetter参数来实现，修改后的代码如下：

export class SomeComponent implements OnInit {
  @Input() data!: any[];
  columnDefs: ColDef = [];

  ngOnInit() {
    this.data.forEach(data => Object.keys(data).forEach(key => {
      this.columnDefs.push({
        field: key,
        editable: true,
        valueSetter: (params) => {
          const colId = params.column.getColId();
          const colIdSplit = colId.split('_');
          const groupKey = colIdSplit[0];
          const valueType = colIdSplit[1];

          // 处理min值编辑：不能大于对应max值
          if (valueType.toLowerCase() === 'min') {
            const maxValue = params.data[`${groupKey}_max`];
            const isValid = maxValue ? parseInt(params.newValue, 10) <= parseInt(maxValue, 10) : true;
            params.data[colId] = isValid ? params.newValue : params.oldValue;
            return isValid;
          }

          // 处理max值编辑：不能小于对应min值
          if (valueType.toLowerCase() === 'max') {
            const minValue = params.data[`${groupKey}_min`];
            const isValid = minValue ? parseInt(params.newValue, 10) >= parseInt(minValue, 10) : true;
            params.data[colId] = isValid ? params.newValue : params.oldValue;
            return isValid;
          }

          return true;
        },
        // 其他配置
      })
    }))
  }
}

逻辑说明 #

1. 通过拆分字段名（如one_min拆分为groupKey=one和valueType=min），识别当前编辑的字段所属组类型。
2. 编辑min值时，校验新值是否小于等于对应组的max值，不满足则回退到旧值，同时返回false告知ag-grid本次编辑无效。
3. 编辑max值时，校验新值是否大于等于对应组的min值，逻辑同min值校验。
4. 非min/max字段直接返回true，不做限制。

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