Предотвратить вкладку, если пользовательская проверка не удалась - PullRequest
0 голосов
/ 20 января 2019

в редакторе пользовательских ячеек 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);
  });
}

В приведенном выше коде проверки для 1-го столбца, если значение пусто, то логика выводит «НЕПРАВИЛЬНОЕ ЗНАЧЕНИЕ» в элементе редактора span, но я не могу предотвратить выход, я пробовал event.preventDefault () и событие .stopImmediatePropogation () везде, где я считаю возможным, но бесполезным.

Один из способов предотвращения выхода из табуляции - это вызвать событие grid tabToNextCell и снова вызвать логику проверки, а в случае неудачной проверки, вернуть предыдущий индекс строки и столбец, так что сетка не будет перемещать фокус на следующую ячейку, но это имеет свою собственную недостатки, поскольку фокус удаляется из редактора ячеек (DIV внутри ячейки) и перемещается в ячейку, а также удаляет сообщение об ошибке, так как кажется, что редактор ячеек разрушен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...