Входное управляющее значение не обновляется должным образом из ngModelChange

Question

У меня проблемы с обновлением ввода при вводе пользователем.

Мне нужно получить от пользователя код, который выглядит следующим образом: 354e-fab4 (2 буквенно-цифровые группы по 4 символа, разделенные '-«).Пользователь не должен вводить '-', он вставляется автоматически.Когда пользователь вводит то, что не соответствует регулярному выражению, используемому для проверки, я хочу вернуться к предыдущему действительному значению.

Проблема заключается в том, что значение во входных данных не обновляется должным образом при сбое проверки.С другой стороны, если я установлю жестко запрограммированную строку, значение будет отражено во входных данных.

Я выделил проблему с помощью стекаблиц: https://stackblitz.com/edit/angular-qsbtiz

Вы можете воспроизвести проблему, набрав более 8 символов: тест regexp не пройден, код установлен на предыдущее значение, нозначение не отражается во вводе HTML.

Этот метод вызывается при изменении значения ввода:

onCodeChange(newValue: string) {
    const previousValue = this.code;
    this.code = newValue;
    const regex = new RegExp(/^([a-z0-9]{0,4})?(-)?([a-z0-9]{0,4})?(-)?$/);

    // If the code doesn't match the regex, revert to the old value and return.
    if (!regex.test(newValue)) {

        // This changes this.code, but it's not reflected in the input's value.
        this.code = previousValue;

        // This changes this.code and it is reflected in the input's value.
        //this.code = '1234';
    } else {
        const groups = regex.exec(newValue);
        if (!groups[2] && groups[3]) {
            this.code = `${groups[1]}-${groups[3]}`;
        }
    } 
}

Обратите внимание, что меня интересует, что не так сэтот код, а не в альтернативном решении, как использование пользовательского маскированного компонента ввода.

Спасибо.

Answer 1

Так как вы расщепляете [(ngModel)].Я бы порекомендовал установить его, передав сам элемент в функцию onCodeChange(): Пример Stackbliz

В шаблоне:

<input #input type="text" placeholder="" (ngModelChange)="onCodeChange($event,input)" [ngModel]="code"/>

В вашем файле TS:

  code = '';
  previousValue = ''

  onCodeChange(newValue: string, input) {
    this.code = newValue;
    const regex = new RegExp(/^([a-z0-9]{0,4})?(-)?([a-z0-9]{0,4})?(-)?$/);

    if (!regex.test(newValue)) {
      console.log("No match. Reverting the code to the previous value (this is not working as expected).");
      input.value = this.previousValue;
    } else {
      const groups = regex.exec(newValue);
      if (!groups[2] && groups[3]) {
        this.code = `${groups[1]}-${groups[3]}`;
      }
      //Save previousValue here instead
      this.previousValue = this.code
    } 
  }

Answer 2

Если вы хотите восстановить предыдущее значение, вы должны объявить previousValue и присвоить значение следующим образом.

https://stackblitz.com/edit/angular-vdqbxz

И я изменил событие onModelchange на keyup потому что группы по какой-то причине не генерировали должным образом (IMO, который не связан с этим постом).