Ag grid AG网格：验证行-值设置器的更好方法？

是否有比使用

valueSetter

更好的方法验证

ag网格中的行

我可以用它来实现验证，但我不确定是否有更好的方法


我想验证行中的两个字段。DateFrom和DateUntil（不允许为null，DateFrom必须小于DateUntil）。
有两种可能的验证处理方法：

第一：通过功能

及

第二：通过自定义组件

我建议最好在自定义
组件
之间分割逻辑，但正如您所说，您需要在它们之间验证两个单元格值

在这种情况下，从UI的角度来看，您可以尝试在一个单元格中组合它们，并且只通过一个组件就可以轻松地处理值。
看看这两个片段，它们来自我们的内部知识库（客户可以访问）

编辑列“a（必需）”中的值时，您将看到它不允许您将其保留为空。如果将其保留为空并返回编辑，则将取消编辑

//Force Cell to require a value when finished editing


在本例中，我们使用一个自定义单元格编辑器，该编辑器还将根据6个字符的长度规则验证值。编辑时，如果修改的值超出6个字符，则该值将显示为红色，并且当您停止编辑行时，该值将被重置，因此仅当该值有效时，该值才接受完整编辑

//Inline Validation while editing a cell 

您可以替代valueSetter并调用网格api事务更新

下面是一段伪代码，展示了如何实现这一点

valueSetter: params => {
  validate(params.newValue, onSuccess, onFail);
  return false;
};

validate = (newvalue, success, fail) => {
  if (isValid(newValue)) {
    success();
  } else {
    fail();
  }
};

onSuccess = () => {
  // do transaction update to update the cell with the new value
};

onFail = () => {
  // update some meta data property that highlights the cell signalling that the value has failed to validate
};

通过这种方式，您还可以进行异步验证。
下面是一个异步值设置器的真实示例，它在验证处理程序时成功、失败，并在验证完成时进行事务更新

const asyncValidator = (
  newValue,
  validateFn,
  onWhileValidating,
  onSuccess,
  _onFail
) => {
  onWhileValidating();
  setTimeout(function() {
    if (validateFn(newValue)) {
      onSuccess();
    } else {
      _onFail();
    }
  }, 1000);
};

const _onWhileValidating = params => () => {
  let data = params.data;
  let field = params.colDef.field;

  data[field] = {
    ...data[field],
    isValidating: true
  };
  params.api.applyTransaction({ update: [data] });
};

const _onSuccess = params => () => {
  let data = params.data;
  let field = params.colDef.field;

  data[field] = {
    ...data[field],
    isValidating: false,
    lastValidation: true,
    value: params.newValue
  };
  params.api.applyTransaction({ update: [data] });
};

const _onFail = params => () => {
  let data = params.data;
  let field = params.colDef.field;

  data[field] = {
    ...data[field],
    isValidating: false,
    lastValidation: params.newValue
  };
  params.api.applyTransaction({ update: [data] });
};

const asyncValidateValueSetter = validateFn => params => {
  asyncValidator(
    params.newValue,
    validateFn,
    _onWhileValidating(params),
    _onSuccess(params),
    _onFail(params)
  );
  return false;
};

下面是一个代码运行器示例，显示了这一点：
自定义单元格编辑器对另一个单元格一无所知。这就是我在组件模块中实现Valuation的原因。组件模块比自定义单元编辑器更了解业务逻辑。你的意思是吗？这基本上是正确的答案，我们将添加两个示例来说明clarity@un.spike：“您可以尝试在一个单元格中组合它们，并且只通过一个组件就可以轻松地处理值”。你是什么意思？你有一个例子吗？我现在正在通过ValueSetter在GridComponent中进行验证，而不是在CustomCellEditorNice示例中，但是您没有在两个单元格之间进行验证。在这种情况下，更好的方法是使用ValueStter函数。你不这样认为吗？