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

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

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

Псевдоним: ngForm

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

Классы CSS

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

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

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

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

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

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

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

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

• Если форма имеет только одно поле ввода, то нажатие Enter в этом поле запускает отправку формы (ngSubmit)
• если форма имеет 2+ поля ввода и нет кнопок или input[type=submit], то нажатие Enter не запускает отправку
• если форма имеет одно или несколько полей ввода и одну или несколько кнопок или input[type=submit], то нажатие Enter в любом поле ввода запустит обработчик клика на первой кнопке или input[type=submit] (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;
}