Question

在AG-Grid定制单元格编辑器中，我附加了验证逻辑，如果值不正确/正确，该逻辑将在单元格旁打印验证错误/成功消息。

但是如果验证失败，我需要防止跳出标签。当前，它正在跳出下一个单元格（默认行为），并将不正确的值丢弃为上一个值/状态。

示例：请查看小的模拟代码：

https://plnkr.co/edit/UG14KMkqPrQKCtV6Qx6N?p=preview

ValidationCellEditor.prototype.init = function(params) {
  this.isValid = true;
  this.isValidating = false;

  this.eGui = document.createElement('div');
  this.eGui.innerHTML = `
    <input value=${params.value} />
    <span class="validating-msg hide">Validating...</span>
    <span class="validating-result hide"><span>
  `;
  this.eInput = this.eGui.querySelector('input');
  this.eValidating = this.eGui.querySelector('.validating-msg');
  this.eResult = this.eGui.querySelector('.validating-result');
  this.eInput.addEventListener('input', this.inputChanged.bind(this));
}

ValidationCellEditor.prototype.inputChanged = function(event) {
  this.showValidatingMessage(true);
  this.isValidating = true;
  this.eResult.classList.add('hide');
  this.validate(event.target.value).then(valid => {
    this.isValid = valid;
    this.isValidating = false;
    this.showValidatingMessage(false);
    this.showValidationResult(valid);
  });
}

ValidationCellEditor.prototype.validate = async function(value) {

  return await new Promise(resolve => {
    setTimeout(() => {
      resolve(value.length > 0);
    }, 200);
  });
}

在上面的代码验证中设置了第一列，如果value为空，则逻辑在编辑器span元素中打印“ INCORRECT VALUE”，但我无法阻止跳出，我尝试了event.preventDefault（）和event .stopImmediatePropogation（）在我认为可能的地方但没有用。

防止跳出标签的一种方法是调用网格事件tabToNextCell并再次调用验证逻辑，以防验证失败返回上一行的索引和列，以便网格不会将焦点移到下一个单元格，但这有其自己的缺点是将焦点从单元格编辑器（单元格内的DIV）中移出并移至单元格，并且还删除了错误消息，因为似乎单元格编辑器已损坏。

如果单元格自定义验证失败，请阻止分页

0 个答案: