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

Директива в модуле ng

Обзор

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

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

Псевдоним: `ngForm`

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

Классы CSS

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

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

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

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

По этой причине AngularJS предотвращает действие по умолчанию (отправка формы на сервер), если элемент <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 для доступа к обновленной модели.

Информация о директиве

Эта директива выполняется на уровне приоритета 0.

Использование

как элемент:
```
<form
  [name="string"]>
...
</form>
```

Аргументы

Параметр	Тип	Подробности
name (необязательно)	`string`	Имя формы. Если указано, контроллер формы будет опубликован в связанной области видимости под этим именем.

Анимации

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

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

Нажмите здесь, чтобы узнать больше о шагах, участвующих в анимации.

Пример

© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.7.8/docs/api/ng/directive/form