ng-submit в AngularJS: пример обработки отправки формы

Автор: Джеймс Хартман Джеймс Хартман
Hours обновлено

⚡ Умное резюме

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

  • 🔘 Директивная роль: ng-submit привязывает выражение AngularJS к событию отправки формы.
  • ☑️ Страница не перезагружается: По умолчанию POST-запросы браузера подавляются, если форма не содержит атрибута action.
  • ✅ Реализованный пример: Текстовое поле и функция Display() добавляют каждую тему в массив AllTopic для использования в ng-repeat.
  • 🧪 Контрольная точка проверки: Сочетание $valid с novalidate и ng-disabled блокирует отправку неполных данных.
  • 🇧🇷 Распространенная ошибка: Привязка ng-click к кнопке отправки рядом с ng-submit приводит к двойной отправке.
  • 📊 Примечание к версии: Поддержка AngularJS прекратилась в январе 2022 года; современная версия Angular отправляет данные через (ngSubmit).
Читать

Директива ng-submit в AngularJS привязывает событие отправки формы к функции контроллера.

Директива AngularJS ng-submit

ng-отправить Директива в AngularJS используется для привязки приложения к событию отправки браузера. Так что в случае AngularJS в событии отправки вы можете выполнить некоторую обработку внутри самого контроллера, а затем отобразить обработанную информацию пользователю.

Примечание к версии: Поддержка AngularJS 1.x в рамках долгосрочной поддержки прекратилась 31 декабря 2021 года, и команда разработчиков фреймворка это подтверждает. Поддержка AngularJS официально прекращена. В январе 2022 года, поэтому никаких релизов или обновлений безопасности не последовало. Каждый шаг и блок кода ниже сохранены в точности так, как написано, в качестве исторической справки. Новые разработки относятся к современному Angular, который выражает ту же идею, что и... (ngSubmit) привязан к FormGroup.

Как отправить форму в AngularJS с помощью ng-submit

Процессы отправки информации на веб-странице обычно обрабатываются событием отправки в веб-браузере. Это событие обычно используется для отправки информации, которую пользователь мог ввести на веб-странице, на сервер для дальнейшей обработки, например, учетные данные для входа, данные формы и т. д. Отправка информации может осуществляться посредством запроса GET или POST.

Давайте возьмем пример отправки формы Angular, чтобы увидеть, как отправлять формы в AngularJS.

В нашем примере отправки формы AngularJS мы собираемся предоставить пользователю текстовое поле, в котором он сможет ввести тему, которую хочет изучить. На странице будет кнопка «Отправить», при нажатии которой тема будет добавлена ​​в неупорядоченный список.

Иллюстрация ниже tracПоследовательности действий, начиная с темы, введенной в текстовое поле, через кнопку «Отправить» и заканчивая элементом списка, добавленным ниже.

Форма AngularJS с текстовым полем для выбора темы, кнопкой «Отправить» и результирующим неупорядоченным списком тем.
Отправка формы в AngularJS с помощью ng-submit

Пример отправки формы AngularJS

Теперь мы увидим пример отправки формы AngularJS из контроллера с использованием директивы ng-submit:

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form ng-submit="Display()">
        &nbsp;&nbsp;&nbsp;
        Enter which topic you would like to learn
        <input type="text"  ng-app="sampleApp" ng-model="Topic"><br>

        <input type="submit" value="Submit"/>

        <ul ng-repeat="topicname in AllTopic">
            <li>{{topicname}}</li>
        </ul>
    </form>
</div>

<script>
   var sampleApp = angular.module("sampleApp",[]);

    sampleApp.controller("AngularController",function($scope) {
        $scope.AllTopic=[];
        $scope.Display = function () {
            $scope.AllTopic.push($scope.Topic);
        }
    });
</script>
</body>
</html>

Code Объяснение:

  1. Сначала мы объявляем HTML-тег формы, который будет содержать текстовое поле и кнопку отправки, как показано в примере события отправки формы в Angular. Затем мы используем директиву AngularJS ng-submit для привязки функции «Display()» к нашей форме. Эта функция будет определена в нашем контроллере и будет вызываться при отправке формы.
  2. У нас есть текстовый элемент управления, в котором пользователь вводит тему, которую хочет изучить. Это будет связано с переменной «Тема», которая будет использоваться в нашем контроллере.
  3. В AngularJS есть обычная кнопка отправки, которую пользователь нажмет, когда войдет в нужную тему.
  4. Мы использовали нг-повторить Директива для отображения элементов списка тем, которые вводит пользователь. Директива ng-repeat проходит по каждой теме в массиве AllTopic и отображает соответствующее имя темы.
  5. В нашем контроллере мы объявляем переменную-массив с именем 'AllTopic'. Она будет использоваться для хранения всех тем, введенных пользователем на шаге 2.
  6. Мы определяем код для нашей функции Display(), которая будет вызываться всякий раз, когда пользователь нажимает кнопку «Отправить». Здесь мы используем функцию push array, чтобы добавить темы, введенные пользователем через переменную «Тема», в наш массив «AllTopic».

Если пример кода формы AngularJS выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Выход:

Результат работы примера AngularJS ng-submit в браузере, показывающий пустое текстовое поле для темы и кнопку «Отправить».

Чтобы увидеть работающий код, сначала введите название темы, например «Angular», как показано выше, в текстовом поле, а затем нажмите кнопку «Отправить».

Результат работы AngularJS ng-submit после нажатия кнопки «Отправить»: введенная тема добавляется в список.

  • После нажатия кнопки «Отправить» вы увидите элемент, введенный в текстовое поле, добавленный в список элементов.
  • Это достигается с помощью функции Display(), которая вызывается при нажатии кнопки отправки.
  • Функция Display() добавляет текст в переменную массива с именем AllTopic. И наша директива ng-repeat проходит через каждое значение в переменной массива AllTopic и отображает их как элементы списка соответственно.
Не пропустите:

ng-submit против ng-click: какой использовать

Оба формата Директивы AngularJS Они могут вызывать одну и ту же функцию контроллера, но при этом отслеживать разные события браузера. ng-submit сидит на <form> Этот тег реагирует на событие отправки формы, поэтому он также срабатывает, когда пользователь нажимает клавишу Enter в поле ввода. ng-click Нажимается на кнопку и реагирует только на щелчок мыши или аналогичное действие.

Аспект ng-отправить нг-щелчок
Элемент хоста тег формы Любой кликабельный элемент
Мероприятие прослушали Отправить, включая клавишу Enter. только клик
POST-запрос по умолчанию в браузере Подавлен директивой Срабатывает кнопка отправки.
Доступ к форме состояния Считывает значения $valid и $invalid в контроллере формы. Отсутствует собственный контекст формы
Естественная посадка Передача данных формы контроллеру. Кнопки панели инструментов, ссылки, триггеры модальных окон

Поддержка клавиатуры обычно решает вопрос выбора. Форма, оснащенная... ng-click Система игнорирует клавишу Enter, что раздражает пользователей при заполнении поля для входа в систему. Зарезервировать ng-click для действий, не связанных с отправкой форм, таких как очистка поля или открытие диалогового окна.

Почему ng-submit препятствует отправке формы по умолчанию в браузере?

Обычная HTML-форма реагирует на событие отправки, сериализуя свои поля и запрашивая у браузера загрузку новой страницы, которая отбрасывает все значения, хранящиеся в ней. $scope, ng-submit Директива предотвращает это: она вызывает preventDefault() Для вас, чтобы выражение выполнялось, а текущая страница оставалась на месте. Нет $event аргументы не требуются, и ручной вызов не требуется.

Подавление имеет одно задокументированное условие. Согласно ngSubmit referenceДействие по умолчанию предотвращается только в том случае, если форма не содержит никаких данных. action, data-action or x-action атрибут. Добавьте любой из них, и браузер продолжит навигацию как обычно после завершения обработчика, что является правильным поведением для формы, отображаемой на сервере с прогрессивной оптимизацией, и неожиданностью во всех остальных случаях.

Поскольку директива "поглощает" объект события, считывайте отправленные значения из свойств, которые нг-модель записаны в область видимости или переданы явно, как в ng-submit="Display(Topic)".

Как проверить форму перед запуском ng-submit

В приведенном выше примере принимается пустая тема, поскольку ничто не проверяет текстовое поле первым. AngularJS создает контроллер формы для каждой именованной формы, и этот контроллер предоставляет флаги, необходимые для контроля отправки. Добавить novalidate Таким образом, браузер оставляет свои собственные HTML5-пузырьки отключенными, а AngularJS — выключенным. проверка формы берет на себя.

  1. Придайте форме nameAngularJS публикует контроллер с таким именем в окружающем окружении. контроллер объем.
  2. Добавить novalidate для тега формы, чтобы не мешала стандартная проверка данных в браузере.
  3. Отметьте поля, используя required, ng-minlength, ng-maxlength or ng-pattern.
  4. Защитите обработчика с помощью $validи передайте контроллер формы, чтобы функция могла проверить отдельные поля.
  5. Отключите кнопку с помощью ng-disabled указывая на $invalidчто обеспечивает мгновенную визуальную обратную связь.
<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate>
    <input type="text" name="Topic" ng-model="Topic" required>
    <input type="submit" value="Submit" ng-disabled="topicForm.$invalid">
</form>

Большинство проблем, связанных с этим шаблоном, объясняются двумя ошибками:

  • Double представление. Переплет ng-click при нажатии кнопки отправки ng-submit Если обработчик находится на форме, он запускается дважды, по одному разу для каждого события. В официальном справочнике предостерегают от комбинирования двух обработчиков, поэтому выберите один из них.
  • Неожиданные заявки. Любая кнопка внутри формы без type="button" Вызывает событие отправки. Кнопки «Отмена» и «Сброс» следует явно пометить, иначе они также вызовут обработчик.

Охрана на $valid Это скорее удобство, чем мера безопасности. Значения всё равно должны быть повторно проверены на сервере перед сохранением.

Часто задаваемые вопросы (FAQ)

Да. Форма, содержащая поле ввода или кнопку типа submit, вызывает событие submit при нажатии клавиши Enter внутри поля, поэтому выражение ng-submit выполняется без дополнительного обработчика нажатия клавиши.

Нет. Только элементы формы вызывают событие отправки, которое отслеживает директива. Переместите ng-submit на тег формы или добавьте ng-click к элементу, на который вы хотите реагировать.

ng-submit не передает аргументов. Прочитайте свойства области видимости, которые заполнил ng-model, или передайте их явно, например, ng-submit=”Display(Topic)” или ng-submit=”Display(topicForm)”.

Да. Каждый элемент формы получает свой собственный контроллер формы, поэтому дайте каждой форме уникальное имя и привяжите отдельный обработчик. Использование одной и той же функции в разных формах может привести к конфликтам областей видимости.

Обработчик срабатывает в любом случае, но поле без нг-модель Значение переменной `$scope` никогда не записывается в `$scope`, поэтому функция не может его прочитать. Привязывайте каждый входной параметр, который вы планируете обрабатывать.

Скомпилируйте форму в тесте, установите значение модели в области видимости, запустите событие отправки, а затем проверьте массив или вызов сервиса, который генерирует обработчик. Karma с Jasmine по-прежнему остается наиболее распространенным сочетанием.

Языковые модели считывают форму модели и требуемый черновик, атрибуты ng-pattern и ng-minlength, а также соответствующие сообщения, что значительно упрощает работу с AngularJS. проверка формы это можно перенести на этап проверки.

Второй пилот GitHub В режиме агента шаблон переписывается в (ngSubmit) с FormGroup, и генерируется класс компонента, однако сгенерированные валидаторы и асинхронные вызовы по-прежнему требуют проверки и тестирования человеком.

Подведем итог этой публикации следующим образом: