Почему одно и то же значение в input то валидно, то нет?

Question

[ScarletFlash]

Всем привет.

Столкнулся с непонятной мне вещью при работе с формами Angular.
Валидация ведет себя непредсказуемым образом, но удалось выявить несколько закономерностей:
– Цифры всегда валидны
– Буквы валидны при добавлении
– Буквы невалидны при удалении

Подскажите, почему оно так работает и как избежать такого непостоянства?

Как это выглядит в жизни

В консоль пишу из функции:

validate(control: FormControl) {
        const pattern: RegExp = namePatternExp;
        console.log(control.value, pattern.test(toString(control.value)));
        return pattern.test(toString(control.value)) ? null : {
            validate: {
                valid: false
            }
        };
    }

toString из Lodash – ни на что не влияет. Без него то же самое.
namePatternExp такой: [a-zA-Z ]* (от отчаяния взял из оф. документации Angular)

Comments

[dollar]

Попробуйте

let s = toString(control.value)
console.log(s, s.length, pattern.test(s), pattern);

Answer 1

[dollar]

Предлагаю такой простой эксперимент в консоли:

Comments

[Антон Швец]

magic...

Answer 2

[Антон Швец]

ссылки для размышления
jsfiddle.net/xuxicheta/41rvdwh0/7
https://angular-reactive-form-guuytj.stackblitz.io

https://learn.javascript.ru/regexp-methods#regexp-...
Там не написано, но regexp.test(str) c флагом g работает так же, как и exec.
Т.е. если есть g, то регэксп останавливается на последнем успешном совпадении и запоминает индекс. При следующем вызове начинает с него.

Когда вы добавляете 1 букву, следующей проверке скармливается отрезок начиная с lastIndex, т.е. это наша последняя добавленная буква. И он выдает true. Когда удаляете одну букву, lastIndex оказывается за границей строки и поиск с ошибкой возвращает false.
В случае с цифрой регэксп не находит ничего, и lastIndex остается 0, а поскольку ваше условие - любое количество букв, и нулевое количество букв тоже подходит, то возвращается true