Изменить моментальное изменение значения в модели Angular

Question

[Васса]

Я юзаю Angular, у меня реализована валидация поля, так:

<input class="d-form__input-text" ng-model="email" ng-required="true"  ng-pattern="{{EMAIL_REGEXP}}" name="email" type="email">

все как бы ок, но если я начинаю вводить текст, сразу же происходит обновление переменой - соответсвенно email с одним символом валидным быть не может и отрисовываются ошибки раньше времени.

Т.е. юзер еще не закончил ввод ему уже говорит - не валидно, как можно сделать так чтобы валидация срабатывала или с задержкой или после того пользователь перешел в другое поле и тп.

Answer 1

[Васса]

Спасибо.

намаялся с этим вопросом но зато чуть больше познакомился с angular:)

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

Comments

[Васса]

апдейт

1. добавляем класс при условии focus + $pristine = не отображаем никакие ошибки
2. blur очищаем спец. класс в п.1 => отображаем ошибки
3. при последующем фокусе идет обычная автовалидация и висит ошибка => исчезает когда поле будет заполнено валидно

все я счатлив:)

Answer 2

[_ _]

Я из такой ситуации очень просто вышел - вывожу ошибки валидации только если человек нажал "Сохранить" и есть ошибки. Также я скрываю ошибку валидации, если после того, как была выведена ошибка валидации, человек начал чего-то в этом поле писать.
Единственный трабл такого подхода - это куча лишнего в html-разметке. Но у меня для его решения есть маленький велосипедик.

Answer 3

[pofigizm]

Есть директива ng-Focus которая может вызвать таймер или еще чего-нибудь.
К сожалению нету события потери фокуса, поэтому тоже велосипед.

Answer 4

[kompi]

Как вариант, сделать оформление с помощью доп. класса через ng-class. Т.е. визуально показ ошибки будет только когда сработает условие ng-class. Под неё уже можно будет любую функцию написать.
Еще есть одно dirty решение для ng-pattern - stackoverflow.

Answer 5

[GM2mars]

Почитайте доки для AngulaJS там должен быть таймер или выбор типа события для срабатывания валидации.
Я бы поставил события change (изменение значения в поле) и past (вставка в поле).