ng-submit в AngularJS: Обробка надсилання форми за допомогою прикладу

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

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

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

Як подати форму в AngularJS за допомогою ng-submit

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

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

У нашому прикладі надсилання форми AngularJS ми надамо користувачеві текстове поле, у якому вони можуть ввести тему, яку хочуть вивчити. На сторінці буде кнопка надсилання, натискання якої додасть тему до невпорядкованого списку.

Ілюстрація нижче tracщо перетікають від теми, введеної в текстове поле, через кнопку «Надіслати» до елемента списку, доданого нижче.

Приклад надсилання форми 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. Потім ми використовуємо директиву ng-submit AngularJS для прив’язки функції «Display()» до нашої форми. Ця функція буде визначена в нашому контролері та викликатиметься під час надсилання форми.
2. У нас є текстовий елемент керування, у якому користувач вводить тему, яку хоче вивчити. Це буде прив’язано до змінної під назвою «Тема», яка використовуватиметься в нашому контролері.
3. В AngularJS є звичайна кнопка надсилання, яку користувач натискає, коли вводить потрібну тему.
4. Ми використали ng-повтор директива для відображення елементів списку тем, які вводить користувач. Директива ng-repeat переглядає кожну тему в масиві "AllTopic" і відображає назву теми відповідно.
5. У нашому контролері ми оголошуємо змінну-масив під назвою «AllTopic». Вона буде використовуватися для зберігання всіх тем, введених користувачем на кроці 2.
6. Ми визначаємо код для нашої функції Display(), яка буде викликатися кожного разу, коли користувач натискає кнопку «Надіслати». Тут ми використовуємо функцію push array, щоб додати теми, введені користувачем за допомогою змінної «Topic», до нашого масиву «AllTopic».

Якщо приклад коду форми AngularJS виконано успішно, під час запуску коду в браузері буде показано наступний результат.
вихід:

Щоб побачити, як працює код, спочатку введіть назву теми, як-от «Angular», як показано вище, у текстовому полі, а потім натисніть кнопку «Надіслати».

• Після натискання кнопки «Надіслати» ви побачите елемент, який було введено в текстове поле, доданий до списку елементів.
• Це досягається за допомогою функції Display(), яка викликається, коли натискається кнопка відправки.
• Функція Display() додає текст до змінної масиву під назвою "AllTopic". І наша директива ng-repeat переглядає кожне значення у змінній масиву "AllTopic" і відображає їх як елементи списку відповідно.

ng-submit проти ng-click: який використовувати

обидві Директиви AngularJS можуть викликати ту саму функцію контролера, але вони прослуховують різні події браузера. ng-submit сидить на <form> та реагує на подію submit, тому він також спрацьовує, коли користувач натискає Enter усередині поля. ng-click знаходиться на кнопці та реагує лише на клацання миші або еквівалентну активацію.

Підтримка клавіатури зазвичай вирішує вибір. Форма, підключена до ng-click ігнорує клавішу Enter, що дратує користувачів під час заповнення поля входу. Резерв ng-click для дій, які не є надсиланням форми, таких як очищення поля або відкриття діалогового вікна.

Чому ng-submit запобігає надсиланню у браузері за замовчуванням

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

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

Оскільки директива поглинає об'єкт події, зчитує надіслані значення з властивостей, які ng-модель записували в область видимості або передавали їх явно, як у 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 це зручність, а не засіб контролю безпеки. Значення все одно потрібно повторно перевірити на сервері, перш ніж їх буде збережено.

Поширені запитання