Осенью прошлого года модуль ngMessages был выпущен с выпуском Angular 1.3. Это добавило расширенную поддержку для отображения сообщений пользователю — как правило, сообщения об ошибках от проверки формы. Перед выпуском ngMessages разработчики были вынуждены полагаться на такие директивы, как ng-class и ng-show для отображения этих ошибок. Это привело к загроможденному, повторяющемуся коду.
Однако теперь ngMessages предоставляет возможность отображать пользовательские сообщения об ошибках, не нарушая принцип кодирования DRY — не повторяйте себя. И, по мере того как Angular постепенно продвигается к версии 2.0, команда разработчиков Angular продолжает внедрять для нее новые функции . Поэтому я подумал, что было бы полезно продемонстрировать, насколько просто ngMessages делает процесс проверки форм в AngularJS.
Начиная
Это будет наш основной шаблон:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ngMessages demo</title> </head> <body ng-app="app"> <script src="path/to/angular.min.js"></script> <script src="path/to/angular-messages.min.js"></script> <script> var app = angular.module('app', ['ngMessages']); </script> </body> </html>
Как видите, мы загружаем Angular, а ngMessages модуль ngMessages , прежде чем ngMessages его в наше приложение. Для тех из вас, кто хочет следовать дома, код этого руководства доступен на GitHub . Для нетерпеливых, вы также можете перейти к демонстрации в конце статьи.
Далее мы собираемся создать форму со следующими полями:
- Имя
- Фамилия
- Адрес электронной почты
- Телефонный номер
- Сообщение
Я добавлю required атрибут ко всем полям (так как они будут обязательными), а также использую директиву ng-model чтобы связать их со свойствами в текущей области.
<form name="exampleForm" class="myForm" required> <label>First Name:</label> <input type="text" name="userFirstName" ng-model="firstName" required /> <label>Last Name:</label> <input type="text" name="userLastName" ng-model="lastName" required /> <label>Email Address:</label> <input type="email" name="userEmail" ng-model="email" required /> <label>Phone Number:</label> <input type="email" name="userPhoneNumber" ng-model="phoneNumber" required /> <label>User Message:</label> <textarea type="text" name="userMessage" ng-model="message" required></textarea> </form>
Введите ngMessages
Теперь давайте ngMessages в код и посмотрим, как ngMessages позволяет нам использовать атрибуты, которые мы указываем для входных данных, для простой проверки формы.
Обязательные поля
Первое, на что следует обратить внимание, это то, что форма называется exampleForm . При использовании директивы ng-messages мы передаем ей угловое выражение, оценивающее объект ключ / значение (обычно это объект $error в экземпляре ngModel ). В нашем случае это будет имя формы, связанное с атрибутом имени соответствующего поля формы, связанное с вышеупомянутым объектом $error .
<div ng-messages="exampleForm.userFirstName.$error">
Как только это будет сделано, вам просто нужно ngMessages div содержащий атрибут ng-message внутри ngMessages div . Значение, передаваемое атрибуту ng-message будет зависеть от директив, которые мы добавили в поле ввода; в этом случае значение будет required .
Это даст нам:
<label>First Name:</label> <input type="text" name="userFirstName" ng-model="firstName" required /> <div ng-messages="exampleForm.userFirstName.$error"> <div ng-message="required">This field is required</div> </div> <label>Last Name:</label> <input type="text" name="userLastName" ng-model="lastName" required /> <div ng-messages="exampleForm.userLastName.$error"> <div ng-message="required">This field is required</div> </div>
Эл. адрес
Далее мы хотим убедиться, что пользователь вводит правильный адрес электронной почты. К счастью, HTML5 делает это довольно простой задачей. В предыдущем примере атрибут name полей ввода принимал значение text , однако адреса электронной почты принимают значение email . Как и в примере выше, вы просто связываете имя формы, имя ввода и валидатор ошибок и передаете их атрибуту ng-messages , чтобы активировать сообщения об ошибках. Затем мы можем добавить дополнительный div содержащий атрибут ng-message который принимает значение email . Таким образом, мы можем настроить таргетинг на значение электронной почты точно так же, как и на required значение.
<label>Email Address:</label> <input type="email" name="userEmail" ng-model="email" required /> <div ng-messages="exampleForm.userEmail.$error"> <div ng-message="required">This field is required</div> <div ng-message="email">Your email address is invalid</div> </div>
Регулярные выражения
В дальнейшем мы будем использовать директиву ng-pattern для проверки номера телефона пользователя. Для тех, кто не знаком с ng-pattern , он используется, чтобы убедиться, что поле ввода соответствует регулярному выражению, которое передается в атрибут. В этом случае мы будем проверять номер телефона пользователя, передавая следующее регулярное выражение в атрибут ng-pattern :
/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/
Это будет соответствовать следующим форматам (и убедитесь, что мы принимаем действительный десятизначный номер телефона):
(123) 456-7890 123-456-7890 123.456.7890 1234567890 +31636363634 075-63546725
Сообщение об ошибке ng-pattern активируется путем передачи значения pattern в ng-message , что можно увидеть в приведенном ниже коде:
<label>Phone Number:</label> <input type="email" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/> <div ng-messages="exampleForm.userPhoneNumber.$error"> <div ng-message="required">This field is required</div> <div ng-message="pattern">Must be a valid 10 digit phone number</div> </div>
Проверка телефонных номеров с помощью регулярных выражений — сложная задача (и, честно говоря, проще — лучше). Чтобы узнать больше об этом, вы можете прочитать эту статью SitePoint или эту ветку переполнения стека . Чтобы узнать больше о регулярных выражениях в целом, вы можете прочитать эту статью в Mozilla Developer Network.
Минимальная длина и максимальная длина
Последнее, что мы хотим сделать, это проверить сообщение пользователя. Имя этого поля — userMessage и оно обязательно, как и в приведенных выше примерах. Однако на этот раз мы будем использовать ng-minlength и ng-maxlength . Оба эти атрибута принимают целочисленные значения, которые будут равны установленному количеству символов — атрибут ng-minlength используется для задания количества символов, ограниченных пользователем, тогда как атрибут ng-maxlength устанавливает максимальное количество символов, которое пользователь разрешено войти
В приведенном ниже примере вы увидите, что мы передаем сообщения об ошибках как в значения minlength и maxlength . При этом сообщение об ошибке для значения minlength будет отображаться до тех пор, пока пользователь не minlength нужное количество символов. Кроме того, сообщение об ошибке, определенное для maxlength , появится, когда пользователь maxlength установленное количество символов, переданных в атрибут ng-maxlength .
<label>User Message:</label> <textarea type="text" name="userMessage" ng-model="message" ng-minlength="100" ng-maxlength="1000" required> </textarea> <div ng-messages="exampleForm.userMessage.$error"> <div ng-message="required">This field is required</div> <div ng-message="minlength">Message must be over 100 characters</div> <div ng-message="maxlength">Message must not exceed 1000 characters</div> </div>
Теперь, когда мы проверили все необходимые поля, у вас должна быть полностью функциональная форма, которая отображает любое сообщение, которое вы пожелаете, основываясь на тегах ввода для вашей формы!
Последний твик
Одна из лучших особенностей ngMessages и Angular в целом — это возможность совместно использовать различные директивы. Например, вы можете скрыть сообщения об ошибках, добавив оператор ng-if="exampleForm.inputName.$dirty после директивы ng-messages . Чтобы показать вам, как это делается, я добавил оператор ng-if в userMessage раздел формы, который мы только что создали. Теперь нет сообщений об ошибках до тех пор, пока поле не будет затронуто или загрязнено.
<label>User Message:</label> <textarea type="text" name="userMessage" ng-model="message" ng-minlength="100" ng-maxlength="1000" required> </textarea> <div ng-messages="exampleForm.userMessage.$error" ng-if="exampleForm.userMessage.$dirty"> <div ng-message="required">This field is required</div> <div ng-message="minlength">Message must be over 100 characters</div> <div ng-message="maxlength">Message must not exceed 1000 characters</div> </div>
Вывод
Надеемся, что к настоящему времени вы уже достаточно ngMessages API ngMessages и в том, как его можно использовать для простой проверки формы. В дополнение к тому, что мы видели здесь, есть множество других трюков, которые вы можете сделать. Например, Angular позволяет вам связывать вместе директивы ngMessages и ngAnimate и создавать собственные анимации, которые показывают и скрывают пользовательские сообщения об ошибках. Я призываю вас использовать эту новую функцию в Angular и чувствовать себя максимально комфортно с ней — модуль ngMessages предлагает множество различных функций при работе с данными форм, от которых вы наверняка не хотите отказываться!
Если у вас есть какие-либо вопросы или вы хотите поделиться своим мнением об этой технике, не стесняйтесь обращаться ко мне в комментариях.