Валидация AngularJS форм с ngMessages

angular
image-3100

Angular всегда стремились предоставить инструменты для облегчения работы с формами.
В Angular 1.3, есть новый инструмент для создания и управления сообщениями формамы — ngMessages. Этот модуль помогает нам справиться с отображением сообщений об ошибках валидации форм.

Вывод сообщения без ngMessages

Давайте взглянем на то, как формы выглядят без использования этого модуля.

<form name="userForm">
    <input
        type="text"
        name="username"
        ng-model="user.username"
        ng-minlength="3"
        ng-maxlength="8"
        required>
    <!-- show an error if username is too short -->
    <p ng-show="userForm.username.$error.minlength">Username is too short.</p>
    <!-- show an error if username is too long -->
    <p ng-show="userForm.username.$error.maxlength">Username is too long.</p>
    <!-- show an error if this isn't filled in -->
    <p ng-show="userForm.username.$error.required">Your username is required.</p>
</form>

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

Быстрый взгляд на ngMessages

Давайте используем предыдущий пример и посмотрим, как это будет выглядеть с ngMessages.

<form name="userForm">
    <input
        type="text"
        name="username"
        ng-model="user.username"
        ng-minlength="3"
        ng-maxlength="8"
        required>
    <div ng-messages="userForm.name.$error">
        <p ng-message="minlength">Your name is too short.</p>
        <p ng-message="maxlength">Your name is too long.</p>
        <p ng-message="required">Your name is required.</p>
    </div>
</form>

Гораздо лучше. ngMessages будет обрабатывать, показывая и скрывая определенные сообщения, основанные на ошибках.

Использование ngMessages

Установить ngMessages очень просто. Нам просто нужно загрузить модуль после AngularJS и затем добавить его в нашем приложении.

Загрузка зависимости и добавление

<!-- load angular -->
<script src="//code.angularjs.org/1.4.0/angular.js"></script>
<!-- load ngmessages -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<!-- load our custom app -->
<script src="app.js"></script>

Теперь мы можем добавить в наше приложение в app.js.

angular.module('app', ['ngMessages']);

Отображение сообщений

Просто используйте директиву ng-messages и передайте в поле то что вы хотите увидеть при возникновении ошибки.
Формат использования:

<div ng-messages="<formName>.<inputName>.$error">
    <p ng-message="<validationName>">Your message here.</p>
</div>

Заключение

С помощью этого простого модуля, валидация форм AngularJS становится гораздо проще. Попробуйте его в ваших собственных приложениях и вы сами все поймете.

  • Konstantin Kozminykh

    Опечатка «ngular.module» вместо «angular.module»