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

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

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

Псевдоним: ngForm

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

Классы CSS

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