Валидация формы (angular form validation) в AngularJS. Свойства $invalid, $valid, $touched, $pristine, $dirty

Пример валидации формы (angular form validation) в AngularJS. Обзор свойств $invalid, $valid, $touched, $pristine, $dirty

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Используемые технологии и библиотеки
  • Spring MVC 4.2.4.Release
  • AngularJS 1.5.0
  • IntelliJ IDEA 15.0.2

1. Описание задачи

Рассмотреть как можно осуществить валидацию формы в AngularJS. Пример использования свойств: $invalid, $valid, $touched, $pristine, $dirty.

2. Структура проекта

Структура проекта с предыдущими частями не поменялась. Рассматриваемая тема находится в представлении validation.jsp.

3. Описание валидации формы в AngularJS

В AngularJS существует реализация стандартных форм для ввода из HTML5 (text, number, url, email, date, radio, checkbox). В том числе предоставляются директивы для валидации: required, pattern, minlength, maxlength, min, max. С помощью собственной директивы и функции можно добавить к объекту $validators свой собственный валидатор. AngularJS использует следующие CSS классы при валидации форм.

  • ng-valid: true, если модель валидна
  • ng-invalid: true, если модель не прошла валидацию
  • ng-valid-[key]: true для каждого валидного ключа. Добавлено с помощью $setValidity
  • ng-invalid-[key]: true для каждого не валидного ключа. Добавлено с помощью $setValidity
  • ng-pristine: true, если с формой еще не взаимодействовали
  • ng-dirty: устанавливается в true, если с формой взаимодействовали
  • ng-touched: true, если управление было передано (потеря фокуса)
  • ng-untouched: true, если форма еще не потеряла фокус
  • ng-pending: true, если если любой из $asyncValidators еще не выполнен

Для каждого класса есть соответствующее свойство в контроллере. Например $valid, $dirty, $pristine и т.д.

4. Применение валидации в AngularJS

Простенький скрипт, который сообщит нам о результатах валидации введенных в форме данных.

Теперь сам код представления с использованием вышеописанных переменных.

Вначале добавлен закомментированный код с описанием различных свойств используемых при работе с валидацией.

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

5. Запуск проекта

Результаты работы кода и валидации можно посмотреть на скриншоте ниже.

formValidation

 

Исходные коды

MVC_AngularJS_Html5 full project — полный проект Spring MVC + AngularJS + Bootstrap + HTML5.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Share Button
5
1838 Total Views 6 Views Today

Добавить комментарий