Эта статья была рецензирована Марком Таулером и Стефаном Максом . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Благодаря своей способности помогать разработчикам создавать лучший пользовательский опыт при создании форм, модуль ngMessages стал основной директивой с выпуском Angular 1.3. Год спустя команда разработчиков Angular продолжила разработку этого модуля, чтобы обеспечить его разработчиками возможностью отображать сообщения об ошибках с помощью шаблонов, добавлять анимацию к сообщениям об ошибках и многое другое. В конце августа я опубликовал статью об использовании модуля ngMessages для проверки основных форм . В этой статье были показаны основы работы этого модуля, а в этой статье рассматриваются некоторые другие функции, к ngMessages нам предоставляет доступ ngMessages .
Модуль ngMessages
При добавлении в приложение Angular API ngMessages предоставляет пользователям следующие директивы для управления сообщениями об ошибках:
В этой статье мы рассмотрим каждую из этих директив, чтобы получить четкое представление о том, как они работают и почему они полезны.
Основы нг-сообщений и нг-сообщений
Давайте посмотрим, какую роль играют директивы ng-message и ng-messages в отображении сообщений об ошибках.
Выше мы видим некоторый код для проверки базового HTML-элемента textarea . Для того чтобы ngMessages работал, он полагается на объект $error ng-model чтобы сообщить приложению, прошел ли ввод проверку или нет. Как только пользователь ngMessages от поля, ngMessages отобразит поля ошибок соответственно. В приведенном выше примере ng-model присутствует внутри input тега с именем userInput . В результате этого ng-messages знает, что нужно искать информацию о нашем поле ввода. В этом примере ng-messages будут отображать сообщения в соответствии с ng-minlength , ng-maxlength и required атрибутами. Важно отметить, что Angular будет отображать эти сообщения об ошибках в порядке их появления в нашем html.
Краткое примечание по использованию ngMessages с ngIf
Чтобы эти сообщения об ошибках не отображались автоматически, мы можем использовать ngIf . При использовании директива ng-if удаляет или воссоздает раздел DOM в зависимости от различных обстоятельств.
Изучив приведенный ниже пример, мы увидим, что код аналогичен первому примеру, однако ng-if был добавлен к нашему родительскому ng-messages . Внутри этого оператора ng-if мы можем передать значение $dirty для отображения сообщений об ошибках, пока пользователь взаимодействует с полем ввода. Сказав это, мы можем видеть наши сообщения об ошибках, которые отображаются при вводе в text-area ниже, что все благодаря директиве ng-if .
ngMessagesInclude
Команда Angular уделяет большое внимание тому, чтобы позволить разработчикам создавать поддерживаемые модульные веб-приложения. Они хотят, чтобы вы сохранили свой код как можно более ngMessagesInclude , и это очень очевидно при использовании директивы ngMessagesInclude . При реализации в приложении Angular директива ng-messages-include позволяет разработчикам повторно использовать пользовательские шаблоны сообщений. Первоначально ngMessagesInclude должен был использоваться в качестве дополнительного атрибута в родительской директиве ng-messages , однако это изменилось в выпуске 1.4. Теперь ngMessagesInclude является собственной директивой, которая должна использоваться в качестве дочернего элемента для директивы ng-messages , как и директива ng-message мы видели в первом примере.
Повторное использование шаблонов
Ниже мы видим пример того, как эта директива позволяет нам отображать ряд сообщений об ошибках. Вместо того, чтобы записывать несколько дочерних директив ng-message , ng-messages-include позволяет нам передавать шаблон сообщений с одной строкой кода. Чтобы сделать это, все, что нам нужно сделать, это передать идентификатор этого шаблона сообщения в эту директиву для его работы.
Перезапись сообщений об ошибках
Директива ng-messages-include также может использоваться вместе с ng-message чтобы обеспечить решения для незначительных настроек сообщений об ошибках. В приведенном ниже примере мы видим, что обе эти директивы присутствуют. Если мы взаимодействуем с формой, мы видим, что ng-message используется для переопределения minlength сообщения, определенного внутри message-template .
В результате этого разработчикам не нужно беспокоиться о проблемах, возникающих в ситуациях, когда им может потребоваться изменить вывод сообщения об ошибке для данного поля. В приведенном выше minlength сообщение minlength формируется вокруг вопроса больше, и это показывает пример того, как это полезно. Кроме того, важно отметить порядок ng-message и ng-messages-include . Если ng-message не определено первым, оно не будет перезаписывать сообщение внутри шаблона.
ngMessagesExp
Далее, давайте взглянем на директиву ng-messages-exp выпущенную в Angular 1.4. При реализации внутри контейнера ng-messages разработчики могут использовать эту директиву для динамического отображения сообщений об ошибках с помощью выражений. Это очень мощный инструмент, поскольку он позволяет разработчикам асинхронно отображать сообщения, в зависимости от ответа сервера. Однако, ради этого руководства, пример, который мы рассмотрим, будет строго иметь дело с кодом на стороне клиента.
В приведенном выше примере мы видим text-area очень похожую на примеры, которые мы рассматривали до сих пор, однако наш HTML-код несколько отличается. В этом примере комбинируется ng-repeat с ng-message-exp для отображения сообщений об ошибках, установленных с помощью $scope.messages зависимости от входного значения. Посмотрев на этот пример, мы увидим, что ng-repeat используется для перебора данных, передаваемых в свойство messages . Теперь, когда пользователь заполняет форму, ng-messages-exp проверит это свойство, чтобы найти правильное выражение, и отобразит его описания. Если мы заглянем в наш код, то увидим, что minlength и maxlength были переданы во втором объекте в свойстве messages . В результате этого ng-messages-exp будет знать, как оценить оба этих значения, и отобразить это сообщение об ошибке динамически. Хотя это довольно просто, оно показывает, сколько дверей открывает разработчикам использование ng-message-exp поскольку оно будет выполнять логику для нас, и дает убедительный пример того, насколько мощным инструментом является эта директива.
Заключительные слова
На этом я заканчиваю свою статью о сообщениях ngMessages и о существенном влиянии, которое он оказал на разработку приложений на Angular. Если одна вещь наверняка, это то, что ngMessages будет продолжать играть огромную роль в структуре Angular, поэтому я искренне надеюсь, что вы получили некоторое представление о том, как эта технология работает. Как всегда, не стесняйтесь обращаться, если у вас есть какие-либо вопросы, так как я был бы более чем рад помочь вам в любом случае!