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

директива в модуле 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–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.6.9/docs/api/ng/directive/form