ng-submit w AngularJS: obsługa przesyłania formularzy z przykładem
Jamesa Hartmana
⚡ Inteligentne podsumowanie
ng-submit w AngularJS wiąże funkcję kontrolera ze zdarzeniem przesyłania formularza w przeglądarce, dzięki czemu wprowadzone wartości są przetwarzane wewnątrz kontrolera, a strona nigdy nie jest przeładowywana przez domyślne żądanie POST.
Dyrektywa AngularJS dotycząca przesyłania
ng-prześlij dyrektywa w AngularJS służy do powiązania aplikacji ze zdarzeniem przesyłania przeglądarki. Zatem w przypadku angularjs w zdarzeniu przesyłania możesz przeprowadzić pewne przetwarzanie w samym kontrolerze, a następnie wyświetlić przetworzone informacje użytkownikowi.
Uwaga dotycząca wersji: AngularJS 1.x zakończył długoterminowe wsparcie 31 grudnia 2021 r., a zespół ds. frameworka potwierdza, że Wsparcie AngularJS oficjalnie zakończone w styczniu 2022 roku, więc nie pojawią się żadne wydania ani poprawki bezpieczeństwa. Każdy krok i blok kodu poniżej jest dokładnie taki, jaki został napisany, zgodnie z historycznym odniesieniem. Nowe prace należą do nowoczesnego Angulara, który wyraża tę samą ideę. (ngSubmit) powiązany z FormGroup.
Jak przesłać formularz w AngularJS za pomocą ng-submit
Procesy przesyłania informacji na stronie internetowej są zwykle obsługiwane przez zdarzenie przesyłania w przeglądarce internetowej. To zdarzenie jest zwykle używane do wysyłania informacji, które użytkownik mógł wprowadzić na stronie internetowej, do serwera w celu dalszego przetwarzania, takich jak dane logowania, dane formularzy itp. Przesyłanie informacji może odbywać się za pomocą żądania GET lub POST.
Weźmy przykład przesyłania formularza Angular, aby zobaczyć, jak przesyłać formularze w AngularJS.
W naszym przykładzie AngularJS form submit pokażemy użytkownikowi pole tekstowe, w którym może wpisać temat, którego chce się nauczyć. Na stronie będzie przycisk Submit, który po naciśnięciu doda temat do nieuporządkowanej listy.
Ilustracja poniżej tracktóre przepływają od tematu wpisanego w polu tekstowym, poprzez przycisk Prześlij, do elementu listy dołączonego poniżej.
Przykład przesłania formularza AngularJS
Teraz zobaczymy przykład przesyłania formularza AngularJS z kontrolera przy użyciu dyrektywy 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()">
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 Wyjaśnienie:
- Najpierw deklarujemy nasz znacznik HTML formularza, który będzie zawierał kontrolkę „pole tekstowe” i „przycisk przesyłania”, jak pokazano w przykładzie zdarzenia przesyłania formularza Angular. Następnie używamy dyrektywy AngularJS ng-submit, aby powiązać funkcję „Display()” z naszym formularzem. Funkcja ta zostanie zdefiniowana w naszym kontrolerze i zostanie wywołana po przesłaniu formularza.
- Mamy kontrolkę tekstową, w której użytkownik wpisuje Temat, którego chce się uczyć. Będzie to powiązane ze zmienną o nazwie „Temat”, która będzie używana w naszym kontrolerze.
- W AngularJS znajduje się normalny przycisk przesyłania, który użytkownik kliknie po wprowadzeniu żądanego tematu.
- Korzystaliśmy z ng-powtórz dyrektywa wyświetlająca elementy listy tematów wprowadzonych przez użytkownika. Dyrektywa ng-repeat przegląda każdy temat w tablicy „AllTopic” i odpowiednio wyświetla nazwę tematu.
- W naszym kontrolerze deklarujemy zmienną tablicową o nazwie „AllTopic”. Będzie ona używana do przechowywania wszystkich tematów wprowadzonych przez użytkownika w kroku 2.
- Definiujemy kod naszej funkcji Display(), która będzie wywoływana za każdym razem, gdy użytkownik kliknie przycisk Wyślij. Tutaj używamy funkcji tablicy push, aby dodać tematy wprowadzone przez użytkownika za pomocą zmiennej „Temat” do naszej tablicy „AllTopic”.
Jeśli przykładowy kod formularza AngularJS zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik.
Wyjście:
Aby zobaczyć działający kod, najpierw wpisz nazwę tematu, np. „Angular”, jak pokazano powyżej, w polu tekstowym, a następnie kliknij przycisk Prześlij.
- Po kliknięciu przycisku „Prześlij” zobaczysz, że element wpisany w polu tekstowym został dodany do listy elementów.
- Osiąga się to za pomocą funkcji Display(), która jest wywoływana po naciśnięciu przycisku wysyłania.
- Funkcja Display() dodaje tekst do zmiennej tablicowej o nazwie „AllTopic”. Nasza dyrektywa ng-repeat przegląda każdą wartość zmiennej tablicowej „AllTopic” i odpowiednio wyświetla ją jako elementy listy.
ng-submit vs ng-click: którego użyć
Obie Dyrektywy AngularJS mogą wywołać tę samą funkcję kontrolera, ale nasłuchują różnych zdarzeń przeglądarki. ng-submit siedzi na <form> i reaguje na zdarzenie Submit, więc jest on wyzwalany również wtedy, gdy użytkownik naciśnie Enter w polu. ng-click umieszczany jest na przycisku i reaguje wyłącznie na kliknięcie myszką lub podobną aktywację.
| WYGLĄD | ng-prześlij | kliknij |
|---|---|---|
| Element hosta | Tag formularza | Dowolny klikalny element |
| Wydarzenie odsłuchane | prześlij, w tym klawisz Enter | tylko kliknij |
| Domyślna przeglądarka POST | Wykluczone przez dyrektywę | Nadal działa po kliknięciu przycisku „Wyślij” |
| Dostęp do stanu formularza | Odczytuje $valid i $invalid w kontrolerze formularza | Brak własnego kontekstu formularza |
| Naturalne dopasowanie | Przekazywanie danych formularza do kontrolera | Przyciski paska narzędzi, linki, wyzwalacze modalne |
Obsługa klawiatury zazwyczaj rozstrzyga wybór. Formularz z okablowaniem ng-click samo w sobie ignoruje klawisz Enter, który frustruje użytkowników wypełniających pole logowania. ng-click do działań, które nie są wysyłaniem formularzy, np. wyczyszczenie pola lub otwarcie okna dialogowego.
Dlaczego ng-submit uniemożliwia przesłanie domyślnej przeglądarki
Zwykły formularz HTML reaguje na zdarzenie wysłania, serializując swoje pola i prosząc przeglądarkę o załadowanie nowej strony, która usuwa wszystkie przechowywane w niej wartości. $scope, ng-submit dyrektywa zapobiega temu, wzywając preventDefault() dla Ciebie, więc wyrażenie działa, a bieżąca strona pozostaje na swoim miejscu. Nie $event nie jest wymagany żaden argument ani ręczne wywołanie.
Tłumienie ma jeden udokumentowany warunek. Zgodnie z ngPrześlij odniesieniedomyślna akcja jest zapobiegana tylko wtedy, gdy formularz nie zawiera żadnych danych action, data-action or x-action Atrybut. Dodaj dowolny z nich, a przeglądarka po zakończeniu obsługi przejdzie do normalnej nawigacji, co jest prawidłowym zachowaniem dla formularza renderowanego stopniowo przez serwer i niespodzianką wszędzie indziej.
Ponieważ dyrektywa pochłania obiekt zdarzenia, odczytaj przesłane wartości z właściwości, które model ng zapisał w zakresie lub przekazał je jawnie, jak w ng-submit="Display(Topic)".
Jak sprawdzić poprawność formularza przed uruchomieniem ng-submit
Powyższy przykład akceptuje pusty temat, ponieważ nic nie sprawdza najpierw pola tekstowego. AngularJS tworzy kontroler formularza dla każdego nazwanego formularza, a ten kontroler udostępnia flagi potrzebne do zablokowania przesłania. Dodaj novalidate więc przeglądarka pozostawia wyłączone własne bąbelki HTML5 i AngularJS walidacja formularza przejmuje.
- Podaj formularz
name. AngularJS publikuje kontroler o tej nazwie w otaczającym go kontroler Zakres. - Dodaj
novalidatedo znacznika formularza, dzięki czemu natywna walidacja przeglądarki nie będzie przeszkadzać. - Zaznacz pola, używając
required,ng-minlength,ng-maxlengthorng-pattern. - Strzeż przewodnika za pomocą
$validi przekaż kontroler formularza, aby funkcja mogła sprawdzić poszczególne pola. - Wyłącz przycisk za pomocą
ng-disabledwskazując na$invalid, co zapewnia natychmiastową informację zwrotną wizualną.
<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>
Dwa błędy odpowiadają za większość zgłaszanych problemów z tym wzorcem:
- Double uległość. Wiążący
ng-clickna przycisku „Wyślij”, podczas gdyng-submitW przypadku, gdy obiekt znajduje się w formularzu, handler jest uruchamiany dwukrotnie, raz na zdarzenie. Oficjalne źródło ostrzega przed łączeniem obu handlerów, więc wybierz jeden. - Nieoczekiwane zgłoszenia. Dowolny przycisk wewnątrz formularza bez
type="button"Wywołuje zdarzenie Submit. Zaznacz jawnie przyciski Cancel i Reset, w przeciwnym razie one również wyzwolą procedurę obsługi.
Pilnowanie $valid To wygoda, a nie kontrola bezpieczeństwa. Wartości nadal muszą zostać ponownie zweryfikowane na serwerze przed zapisaniem.
