Почти каждый веб-сайт использует формы для выполнения различных задач, таких как регистрация пользователей или получение их контактной информации. Очень важно убедиться, что пользователь, заполняющий форму, хотя бы вводит правильную информацию в поля ввода.
Также необходимо показать подробное сообщение об ошибке пользователям, чтобы они могли правильно заполнить форму. Этот процесс может стать очень сложным, когда вам приходится иметь дело с большим количеством элементов формы, каждый из которых должен иметь свои собственные сообщения об ошибках. Чтобы облегчить боль, Angular 1.3 добавил новый модуль под названием ngMessages, чтобы помочь разработчикам легко проверять формы.
Модуль ngMessages дает вам возможность отображать пользовательские сообщения об ошибках для ваших пользователей без написания повторяющегося кода. Из этого руководства вы узнаете, как использовать этот модуль для проверки ваших форм. Вы также узнаете, как загружать сообщения об ошибках извне и показывать сообщения только тогда, когда они действительно необходимы.
Основной пример
Давайте начнем с проверки одного поля ввода с помощью и без помощи ngMessages, чтобы увидеть полезность этого модуля. Без использования ngMessages разметка для элемента input будет выглядеть примерно так:
|
1
2
3
4
5
6
7
8
9
|
<form name=»formValidation»>
<label>Username</label>
<input type=»text» name=»username» ng-model=»inputname» ng-minlength=»6″ ng-maxlength=»12″ required>
<p ng-show=»formValidation.username.$error.minlength»>Username should have at least 6 characters.</p>
<p ng-show=»formValidation.username.$error.maxlength»>Username should have at most 12 characters.</p>
<p ng-show=»formValidation.username.$error.required»>Providing a username is mandatory.</p>
</form>
|
Вам также понадобится следующий код JavaScript:
|
1
|
angular.module(‘app’, []);
|
Все остальные элементы формы должны быть проверены аналогичным образом. Это сделает разметку очень повторяющейся, увеличивая вероятность ошибок. Если вы решили использовать ngMessages для проверки того же ввода формы, разметка выглядела бы как следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
|
<form name=»formValidation»>
<label>Username</label>
<input type=»text» name=»username» ng-model=»inputname» ng-minlength=»6″ ng-maxlength=»12″ required>
<div ng-messages=»formValidation.username.$error»>
<p ng-message=»minlength»>Username should have at least 6 characters.</p>
<p ng-message=»maxlength»>Username should have at most 12 characters.</p>
<p ng-message=»required»>Providing a username is mandatory.</p>
</div>
</form>
|
Код JavaScript теперь станет:
|
1
|
angular.module(‘app’, [‘ngMessages’]);
|
Здесь мы использовали директиву ng-messages чтобы сгруппировать сообщения об ошибках вместе. Значение, переданное в директиву ng-messages следует шаблону formName.inputName.$error . В нашем случае это оценивается как formValidation.username.$error .
Точно так же вы можете также получить значение директивы ng-messages для всех других полей. ngMessages опирается на объект $error , предоставляемый директивой ngModel, чтобы определить, следует ли показывать или скрывать сообщения об ошибках на веб-странице. Он перебирает объект $error поисках ключа, который соответствует значениям любой из директив ng-message .
Вот рабочий пример, который показывает приведенный выше код проверки в действии:
Проверка формы
В этом разделе мы будем проверять форму с именем пользователя, паролем и полем электронной почты. Разметка для формы будет выглядеть примерно так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<form name=»formValidation»>
<label>Username</label>
<input type=»text» name=»username» ng-model=»inputName» ng-minlength=»6″ ng-maxlength=»12″ ng-pattern=»/^\w+$/» required>
<div ng-messages=»formValidation.username.$error»>
<p ng-message=»minlength»>Username should have at least 6 characters.</p>
<p ng-message=»maxlength»>Username should have at most 12 characters.</p>
<p ng-message=»required»>Providing a username is mandatory.</p>
<p ng-message=»pattern»>Username can only be alphanumeric with an optional underscore.</p>
</div>
<label>Password</label>
<input type=»text» name=»userPassword» ng-model=»inputPassword» ng-minlength=»6″ ng-maxlength=»12″ required>
<div ng-messages=»formValidation.userPassword.$error»>
<p ng-message=»minlength»>Password should have at least 6 characters.</p>
<p ng-message=»maxlength»>Password should have at most 12 characters.</p>
<p ng-message=»required»>Providing a password is mandatory.</p>
</div>
<label>Email</label>
<input type=»email» name=»userEmail» ng-model=»inputEmail» required>
<div ng-messages=»formValidation.userEmail.$error»>
<p ng-message=»email»>Please enter a valid email address.</p>
<p ng-message=»required»>Providing an email is mandatory.</p>
</div>
</form>
|
Как видите, разметка, необходимая для проверки различных элементов формы, очень похожа. Одним из важных изменений в этом случае является добавление директивы ng-pattern . Шаблон, который мы здесь используем, гарантирует, что введенное имя пользователя содержит только буквенно-цифровые символы и подчеркивание. \w в /^\w+$/ обозначает такие слова, как AZ, az, 0-9 и _.
Вы должны попробовать ввести другое имя пользователя в поле имени пользователя. Через некоторое время вы заметите, что форма не будет жаловаться на то, что символ не является буквенно-цифровым, если он был набран до первых шести символов или после первых 12 символов. Такое поведение не очень удобно для пользователя.
Например, скажем, некоторые из ваших пользователей начинают свое имя пользователя с восклицательного знака. Им придется подождать, пока они не введут еще шесть символов, чтобы получить ошибку об использовании только буквенно-цифровых символов. Им будет очень неприятно начать вводить имя пользователя снова с самого начала.
По умолчанию ngMessages показывает только одну ошибку для пользователя за раз. Вот почему сообщение о недопустимых символах не может быть отображено, пока пользователь не наберет более шести символов. Кроме того, ngMessages использует порядок, в котором вы вводили сообщения об ошибках, как подсказку, чтобы определить их приоритет.
Если вы указали минимальное символьное сообщение перед буквенно-цифровой ошибкой, ngMessages будет ждать, пока минимальная символьная ошибка не будет устранена, прежде чем отобразится буквенно-цифровая ошибка.
Здесь та же самая форма с сообщениями об ошибках, представленными в другом порядке.
Вы также можете одновременно показать все применимые сообщения об ошибках пользователю, используя ng-messages-multiple . Однако, увидев несколько сообщений об ошибках, как только пользователи начнут вводить данные в поле ввода, они могут их переполнить.
Повторное использование сообщений об ошибках
В нашей разметке все еще много повторений. Если вы хотите показать одно и то же сообщение об ошибке для разных полей ввода, нет смысла повторять его для каждого из них. Модуль ngMessages может помочь вам написать общие сообщения об ошибках только один раз и включить их в вашу форму, когда возникнет такая необходимость. Вот разметка для создания формы, которая отображает общие сообщения об ошибках для пользователей.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<script type=»text/ng-template» id=»generic-messages»>
<p ng-message=»required»>This field is required.</p>
<p ng-message=»minlength»>This field is too short.</p>
<p ng-message=»maxlength»>This field is too long.</p>
</script>
<form name=»formValidation»>
<label>Username</label>
<input type=»text» name=»username» ng-model=»inputName» ng-minlength=»6″ ng-maxlength=»12″ ng-pattern=»/^\w+$/» required>
<div ng-messages=»formValidation.username.$error»>
<p ng-message=»pattern»>Username can only be alphanumeric with an optional underscore.</p>
<p ng-message=»maxlength»>Username cannot be longer than 12 characters.</p>
<div ng-messages-include=»generic-messages»></div>
</div>
<label>Password</label>
<input type=»text» name=»userPassword» ng-model=»inputPassword» ng-minlength=»6″ ng-maxlength=»12″ required>
<div ng-messages=»formValidation.userPassword.$error»>
<div ng-messages-include=»generic-messages»></div>
</div>
<label>Email</label>
<input type=»email» name=»userEmail» ng-model=»inputEmail» required>
<div ng-messages=»formValidation.userEmail.$error»>
<p ng-message=»required»>This field is required.</p>
<p ng-message=»email»>Please enter a valid email address.</p>
</div>
</form>
|
Как и в предыдущем случае, приоритет сообщения определяется его местом в шаблоне. Вы также можете переопределить общие сообщения, представленные в шаблоне, добавив пользовательское сообщение об ошибке в отдельные поля. Сообщения об ошибках также можно загрузить из отдельного файла, используя следующий код:
|
1
2
3
|
<div ng-messages=»formValidation.userPassword.$error»>
<div ng-messages-include=»path/to/generic-messages.html»></div>
</div>
|
Отображение ошибок только при необходимости
Вы можете сделать вашу форму более удобной для пользователя, отображая сообщения об ошибках только тогда, когда пользователь действительно допустил ошибку при заполнении форм. Например, вы можете выбрать отображение только необходимой ошибки поля, когда пользователь фактически пропускает элемент ввода.
Этого можно достичь, используя директиву ng-show или ng-if вместе с $touched и $dirty . В случае $touched сообщение об ошибке отображается, как только ввод теряет фокус. В случае $dirty сообщение об ошибке появляется, как только ввод становится недействительным.
|
1
2
3
4
5
6
7
|
<div ng-messages=»form.username.$error» ng-if=»form.username.$touched»>
<div ng-messages=»form.username.$error» ng-if=»form.username.$dirty»>
<div ng-messages=»form.username.$error» ng-show=»form.username.$touched»>
<div ng-messages=»form.username.$error» ng-show=»form.username.$dirty»>
|
Вот демонстрация, которая показывает разницу между $touched и $dirty .
Вывод
В этом руководстве вы узнали, как легко проверять ввод различных типов элементов формы с помощью ngMessages. Вы также узнали, как многократно использовать одни и те же сообщения об ошибках, чтобы избежать повторения, и как расставлять приоритеты для разных сообщений об ошибках.
Вы также можете использовать как ngMessages, так и ngAnimate, чтобы использовать собственные анимации, чтобы показать или скрыть сообщение об ошибке. Учебник по использованию модуля ngAnimate также будет опубликован в Envato Tuts + в ближайшее время.
Если есть какие-либо советы, которыми вы хотели бы поделиться с другими читателями, или если есть какие-либо вопросы, которые вы хотели бы задать, дайте мне знать в комментариях.