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

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

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

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

Примечание: 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 не выполнены

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

Хук анимации

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

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

//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;
}