Показать и скрыть ошибки на стороне сервера в формах AngularJS 1.3+

Question

Я использую угловую структуру с элементами управления угловым материалом в своем недавнем приложении. Я ищу подходящее решение для решения следующей проблемы:

Вид пользователя form с полем ввода nickname. После того, как пользователь выбрал псевдоним и отправил форму, сервер проверяет, было ли уже выполнено прозвище. В этом случае он возвращает ошибку для Углового клиента.

Чтобы показать пользователю соответствующую ошибку, код затем вызывает form.nickname.$setValidity('nicknameTaken', true). Новый модуль ngMessages используется для отображения ошибки пользователю. Далее form.$isInvalid используется для отключения элементов управления формы, чтобы предотвратить повторную передачу пользователем недопустимого псевдонима.

Моя проблема заключается в следующем: я хочу, чтобы ошибка nicknameTaken автоматически удалялась, как только пользователь снова редактировал поля формы. Каков хороший способ сделать это? Существует ли предопределенный маршрут, когда дело доходит до ошибок проверки на стороне сервера такого рода? (Обратите внимание, что я не запрашиваю асинхронную проверку, потому что я хочу только связаться с моим сервером, когда форма фактически отправляется.)

Answer 1

Вместо этого я бы написал нормальную директиву валидатора. Что-то вроде

<input blacklist="takenNickNames" .../> 

Эта директива будет просто добавить валидатора к входу, и этот валидатор сделает вход недействительным, если значение модели содержится внутри данного takenNickNames массива (и справедливо, если это нет).

Первоначально массив из массива takenNickNames был пустым. Когда форма отправляется и возвращается ошибка, контроллер добавляет недопустимое имя ник в массив.

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

Адрес working example.