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

Директива, которая инициализирует 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;
}