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

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

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

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

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

Рекомендации по использованию ngModel, см.:

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

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

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

Сложные модели (объекты или коллекции)

По умолчанию ngModel отслеживает модель по ссылке, а не по значению. Это важно знать при связывании входных данных с моделями, которые являются объектами (например, Date) или коллекциями (например, массивами). Если изменяются только свойства объекта или коллекции, ngModel не будет уведомлён, и поэтому ввод не будет перерисован.

Модель должна быть назначена совершенно новому объекту или коллекции, прежде чем произойдет перерисовка.

Некоторые директивы имеют параметры, которые заставят их использовать пользовательский $watchCollection для выражения модели

• например, ngOptions сделает это, когда в выражении понимания будет включена track by или если select получит атрибут multiple.

Метод $watchCollection() выполняет только поверхностное сравнение, что означает, что изменение свойств на уровне глубже первого уровня объекта (или только изменение свойств элемента в коллекции, если это массив) всё ещё не вызовет перерисовки модели.

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 не выполнены
• ng-empty: представление не содержит значение или значение считается «пустым» в соответствии с определением метода ngModel.NgModelController
• ng-not-empty: представление содержит непустое значение

Помните, что 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;
}