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

Директива, которая создаёт FormController.

Если задан атрибут name, контроллер формы будет опубликован в текущем области видимости под этим именем.

Псевдоним: ngForm

В Angular формы могут быть вложены. Это означает, что внешняя форма является валидной, когда все дочерние формы также валидны. Однако браузеры не позволяют вкладывать элементы <form>, поэтому Angular предоставляет директиву ngForm, которая ведет себя идентично form, но может быть вложена. Вложенные формы могут быть полезны, например, если необходимо определить валидность подгруппы элементов управления.

Классы CSS

• ng-valid устанавливается, если форма валидна.
• ng-invalid устанавливается, если форма невалидна.
• ng-pending устанавливается, если форма находится в ожидании.
• ng-pristine устанавливается, если форма чистая.
• ng-dirty устанавливается, если форма грязная.
• ng-submitted устанавливается, если форма была отправлена.

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

Отправка формы и предотвращение действия по умолчанию

Поскольку роль форм в приложениях Angular на стороне клиента отличается от классических приложений с обратным соединением, желательно, чтобы браузер не переводил отправку формы в полную перезагрузку страницы, которая отправляет данные на сервер. Вместо этого должна быть выполнена какая-то javascript логика для обработки отправки формы специфичным для приложения способом.

По этой причине Angular предотвращает действие по умолчанию (отправка формы на сервер), если элемент <form> имеет заданный атрибут action.

Вы можете использовать один из двух следующих способов для указания метода javascript, который должен вызываться при отправке формы:

• директива ngSubmit на элементе формы
• директива ngClick на первой кнопке или поле ввода типа submit (input[type=submit])

Чтобы предотвратить двойное выполнение обработчика, используйте только одну из директив ngSubmit или ngClick. Это связано с следующими правилами отправки формы в спецификации HTML:

• Если форма имеет только одно поле ввода, то нажатие Enter в этом поле инициирует отправку формы (ngSubmit)
• Если форма имеет 2+ поля ввода и нет кнопок или полей ввода типа submit, то нажатие Enter не инициирует отправку
• Если форма имеет одно или несколько полей ввода и одну или несколько кнопок или полей ввода типа submit, то нажатие Enter в любом поле ввода вызовет обработчик клика на первой кнопке или поле ввода типа submit (ngClick) и обработчик отправки на содержащей форме (ngSubmit)

Любые ожидающие изменения ngModelOptions будут происходить немедленно при отправке содержащей формы. Обратите внимание, что события ngClick будут происходить до обновления модели. Используйте ngSubmit для доступа к обновлённой модели.

Хук анимации

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

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

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