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

директива в модуле 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-переходов, ключевых кадров и 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;
}

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

Пример

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