Улучшить эту документацию Просмотреть исходный код ngModel

Директива ngModel связывает input,select, textarea (или пользовательский элемент управления формой) с свойством в области видимости с помощью NgModelController, который создаётся и экспонируется этой директивой.

ngModel отвечает за:

• Связывание представления с моделью, что требуется другим директивам, таким как input, textarea или select.
• Обеспечение поведения валидации (например, обязательное поле, число, адрес электронной почты, URL).
• Сохранение состояния элемента управления (валидно/невалидно, грязное/чистое, затронутое/не затронутое, ошибки валидации).
• Установка соответствующих CSS классов на элемент (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched) включая анимации.
• Регистрацию элемента управления у родительской формы form.

Примечание: ngModel попытается связаться с свойством, полученным путём вычисления выражения в текущей области видимости. Если свойство ещё не существует в этой области видимости, оно будет создано неявно и добавлено в область видимости.

Для оптимальной работы с ngModel, см.:

• Понимание областей видимости

Для базовых примеров использования ngModel, см.:

• input
  • текст
  • флажок
  • радиокнопка
  • число
  • e-mail
  • URL
  • дата
  • дата и время
  • время
  • месяц
  • неделя
• select
• textarea

CSS классы

Следующие CSS классы добавляются и удаляются на связанном элементе input/select/textarea в зависимости от валидности модели.

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

Обратите внимание, что ngAnimate может обнаружить добавление и удаление каждого из этих классов.

Хук анимации

Анимации в моделях запускаются при добавлении и удалении любых связанных CSS классов на элементе input, привязанном к модели. Эти классы: .ng-pristine, .ng-dirty, .ng-invalid и .ng-valid, а также любые другие валидации, выполняемые на модели. Анимации, запускаемые в ngModel, работают аналогично ngClass, и к анимациям можно подключиться с помощью CSS-переходов, ключевых кадров и анимаций JavaScript.

Следующий пример демонстрирует простой способ использования CSS-переходов для стилизации элемента input, который стал невалидным после валидации:

//be sure to include ngAnimate as a module to hook into more
//advanced animations
.my-input {
  transition:0.5s linear all;
  background: white;
}
.my-input.ng-invalid {
  background: red;
  color:white;
}