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

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

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

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

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

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

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

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

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

Классы CSS

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

• ng-valid устанавливается, если модель валидна.
• ng-invalid устанавливается, если модель невалидна.
• ng-pristine устанавливается, если модель чистая.
• ng-dirty устанавливается, если модель грязная.

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

Хук анимации

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

Следующий пример показывает простой способ использования 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;
}