Аурелия нежелательных букв, появляющихся в текстовом вводе после преобразования числового формата. - PullRequest
0 голосов
/ 24 сентября 2018

У меня есть текст для ввода номера карты.Он должен содержать только цифры и должен отображаться пользователю в виде 4-значных блоков (пример: 1234 5678 9123 4567).

Мой код успешно удаляет введенные буквы и создает блоки чисел.Проблема в том, что когда я дважды набираю одну нецифровую клавишу, эта клавиша появляется на входе один раз, по-видимому, игнорируя преобразователь значения.Этого не происходит при попытке ввести разные буквы подряд.Любой третий ввод удалит букву, как и должно быть, но проблема не исчезнет.

Используя console.log, я вижу, что toView всегда возвращает правильное значение.Есть ли способ это исправить?Я попытался добавить 'pattern = "^ [\ d] * $"' к входу, но это буквально ничего не делает.
Примеры внизу.

Html:

<input type="text" id="cardNumber" class="form-control" placeholder="1234 5678 9123 4567"
                           value.bind="cardNumber | cardNumberFormat & validate" disabled.bind="isDisabled">

Javascript:

export class CardNumberFormatValueConverter {
      toView(value) {
        let cardNumberBlocks = this.createCardNumberBlocks(value);
        if (cardNumberBlocks) {
          return cardNumberBlocks.join(" ");
        }
        return "";
      }

      fromView(value) {
        return value.split(" ").join("");
      }

      createCardNumberBlocks(value) {
        if (!value) return "";
        return value.match(/\d{1,4}/g);
      }
    }


Примеры:
Ввод: 123456 - Результат: 1234 56 - Правильный
Ввод: 123456a - Результат: 1234 56 - Правильный
Набор: 123456a2 - Результат: 1234 562 - Правильный
Набор: 123456aa - Результат: 1234 56a - Неправильный
Набор: 123456aa2 - Результат:1234 562 - правильно
ввод: 123456ab - результат: 1234 56 - правильно
набор: 123456aaa - результат: 1234 56 - правильно
набор: 123456aba - результат: 1234 56 - правильно
набор: 123456aa3bb -Результат: 1234 563b - Неверно
Набрав: 123456aabbb - Результат: 1234 56b - Неверно

...