ng-submit AngularJS-ben: Űrlapbeküldés kezelése egy példával
James Hartman
⚡ Okos összefoglaló
Az AngularJS-ben az ng-submit egy vezérlőfüggvényt köt az űrlap böngésző általi submit eseményéhez, így a beírt értékek a vezérlőn belül kerülnek feldolgozásra, és az oldal soha nem töltődik újra az alapértelmezett POST-on keresztül.
AngularJS ng-submit irányelv
Az ng-submit Az AngularJS direktívája az alkalmazásnak a böngésző elküldési eseményéhez való kötésére szolgál. Tehát abban az esetben AngularJS az elküldési eseménynél magán az adatkezelőn belül végezhet feldolgozást, majd megjelenítheti a feldolgozott információkat a felhasználónak.
Verzió megjegyzés: Az AngularJS 1.x 2021. december 31-én kilépett a hosszú távú támogatásból, és a keretrendszer csapata megerősítette ezt. Az AngularJS támogatása hivatalosan megszűnt 2022 januárjában, így nem jelentek meg kiadások vagy biztonsági javítások. Minden alábbi lépés és kódblokk pontosan a leírtak szerint kerül megőrzésre, a történelmi hivatkozásként. Az új munka a modern Angularban található, amely ugyanazt az elképzelést fejezi ki, mint a (ngSubmit) FormGroup-hoz kötve.
Űrlap beküldése AngularJS-ben az ng-submit használatával
A weboldalon található információk beküldésének folyamatait általában a webböngésző elküldési eseménye kezeli. Ezt az eseményt általában arra használják, hogy a felhasználó által a weboldalon megadott információkat továbbítsák a szervernek további feldolgozás céljából, mint például a bejelentkezési adatok, űrlapadatok stb. Az információk elküldése történhet GET vagy POST kéréssel.
Vegyünk egy szögletes űrlap beküldési példát, hogy megtudjuk, hogyan kell űrlapokat beküldeni az AngularJS-ben.
Az AngularJS űrlap beküldési példájában egy szövegdobozt fogunk bemutatni a felhasználónak, amelyben megadhatja a tanulni kívánt témát. Az oldalon lesz egy beküldés gomb, amit megnyomva a téma egy rendezetlen listára kerül.
Az alábbi illusztráció tracolyan elemek, amelyek a szövegmezőbe beírt témától a Küldés gombon keresztül az alatta hozzáfűzött listaelemig terjednek.
Példa AngularJS űrlap beküldésére
Most látni fogunk egy példát az AngularJS űrlap elküldésére a vezérlőtől az ng-submit direktíva használatával:
<!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 Magyarázat:
- Először deklaráljuk az űrlap HTML-címkéjét, amely a „szövegmező” és a „küldés gomb” vezérlőelemeket fogja tartalmazni, ahogy az az Angular űrlap elküldési eseményének példájában látható. Ezután az ng-submit AngularJS direktívát használjuk a „Display()” függvény űrlapunkhoz kötéséhez. Ezt a függvényt a vezérlőnkben definiáljuk, és az űrlap elküldésekor hívjuk meg.
- Van egy szöveges vezérlőnk, amelyben a felhasználó beírja a tanulni kívánt témát. Ez egy „Téma” nevű változóhoz lesz kötve, amelyet a vezérlőnk használ.
- Az AngularJS-ben van egy normál beküldés gomb, amelyre a felhasználó rákattint, amikor beírta a kívánt témát.
- Használtuk a ng-ismétlés direktíva a felhasználó által beírt témakörök listaelemeinek megjelenítéséhez. Az ng-repeat direktíva végigmegy az 'AllTopic' tömb minden egyes témakörén, és ennek megfelelően jeleníti meg a téma nevét.
- A vezérlőnkben deklarálunk egy „AllTopic” nevű tömbváltozót. Ez a változó tárolja majd a felhasználó által a 2. lépésben megadott összes témát.
- Meghatározzuk a Display() függvényünk kódját, amely akkor kerül meghívásra, amikor a felhasználó a Küldés gombra kattint. Itt a push tömb funkciót használjuk, hogy a felhasználó által a „Téma” változón keresztül beírt témákat hozzáadjuk az „AllTopic” tömbünkhöz.
Ha az AngularJS űrlappéldakód sikeresen végrehajtásra került, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kód működésének megtekintéséhez először adjon meg egy témanevet, például „Szögletes”, ahogy fent látható a szövegmezőben, majd kattintson a Küldés gombra.
- A küldés gombra kattintás után megjelenik a szövegmezőbe beírt elem a tételek listájához.
- Ezt a Display() függvény éri el, amely a küldés gomb megnyomásakor hívódik meg.
- A Display() függvény hozzáadja a szöveget az 'AllTopic' nevű tömbváltozóhoz. Az ng-repeat direktívánk pedig végigmegy az 'AllTopic' tömbváltozó minden egyes értékén, és ennek megfelelően listaelemként jeleníti meg azokat.
ng-submit vs ng-click: melyiket használja
Mindkét AngularJS direktívák meghívhatják ugyanazt a vezérlőfüggvényt, mégis különböző böngészőeseményeket figyelnek. ng-submit ül a <form> címkét használ, és reagál a submit eseményre, így akkor is aktiválódik, amikor a felhasználó Entert nyom egy mezőn belül. ng-click egy gombon található, és csak egérkattintásra vagy azzal egyenértékű aktiválásra reagál.
| Aspect | ng-submit | ng-kattintás |
|---|---|---|
| Gazdaelem | Az űrlapcímke | Bármely kattintható elem |
| Meghallgatott esemény | elküldés, beleértve az Enter billentyűt is | csak kattintás |
| Alapértelmezett böngésző POST | Az irányelv által elnyomva | Még mindig aktiválódik a küldés gombról |
| Hozzáférés az űrlap állapotához | Beolvassa a $valid és $invalid értékeket az űrlapvezérlőn. | Nincs saját űrlapkontextus |
| Természetes illeszkedés | Űrlapadatok átadása egy vezérlőnek | Eszköztár gombjai, linkek, modális triggerek |
A billentyűzet támogatása általában eldönti a választást. Egy vezetékes űrlap ng-click önmagában figyelmen kívül hagyja az Enter billentyűt, ami bosszantó lehet a bejelentkezési mező kitöltésekor. ng-click olyan műveletekhez, amelyek nem űrlapbeküldések, például egy mező törlése vagy egy párbeszédpanel megnyitása.
Miért akadályozza meg az ng-submit az alapértelmezett böngésző általi elküldést?
Egy egyszerű HTML űrlap a beküldés eseményre úgy reagál, hogy szerializálja a mezőit, és arra kéri a böngészőt, hogy töltsön be egy új oldalt, amely elveti az összes benne tárolt értéket. $scope Az ng-submit az irányelv megakadályozza, hogy ez megtörténjen: felszólítja preventDefault() neked, így a kifejezés lefut, és az aktuális oldal a helyén marad. Nem $event argumentumra van szükség, és nincs szükség manuális hívásra.
Az elnyomásnak egyetlen dokumentált feltétele van. A ... szerint ngReferencia beküldése, az alapértelmezett művelet csak akkor tiltott, ha az űrlap nem tartalmaz action, data-action or x-action attribútum. Ha ezek bármelyikét hozzáadjuk, a böngésző a kezelő befejezése után a szokásos módon navigál, ami a helyes viselkedés egy fokozatosan továbbfejlesztett, szerver által renderelt űrlap esetében, és mindenhol máshol meglepetés.
Mivel az utasítás lenyeli az eseményobjektumot, olvassa be a beküldött értékeket a tulajdonságokból, amelyek ng-modell írta a hatókörbe, vagy explicit módon adta át őket, mint például a ng-submit="Display(Topic)".
Hogyan lehet érvényesíteni egy űrlapot az ng-submit futtatása előtt?
A fenti példa elfogad egy üres témát, mivel semmi sem ellenőrzi először a szövegdobozt. Az AngularJS minden elnevezett űrlaphoz létrehoz egy űrlapvezérlőt, és ez a vezérlő teszi elérhetővé a beküldés kapuzásához szükséges jelzőket. novalidate így a böngésző kikapcsolva hagyja a saját HTML5 buborékait, és az AngularJS-t űrlap érvényesítése veszi át.
- Adja meg az űrlapot egy
name. Az AngularJS közzétesz egy ilyen nevű vezérlőt a környező ellenőr hatálya. - hozzáad
novalidateaz űrlapcímkéhez, így a natív böngésző-érvényesítés nem zavarja. - Jelöld meg a mezőket a segítségével
required,ng-minlength,ng-maxlengthorng-pattern. - Védje a kutyakiképzőt
$valid, és add át az űrlapvezérlőt, hogy a függvény ellenőrizni tudja az egyes mezőket. - A gomb letiltása a következővel:
ng-disabledmutatva$invalid, amely azonnali vizuális visszajelzést ad.
<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>
Két hiba okozza a legtöbb jelentett problémát ezzel a mintával kapcsolatban:
- Double benyújtás. Kötelező
ng-clicka küldés gombra, miközbenng-submitA formon található parancs kétszer futtatja le a kezelőt, eseményenként egyszer. A hivatalos referencia óva int a két kezelő kombinálásától, ezért válassz egyet. - Váratlan beküldések. Bármely gomb egy űrlapon belül anélkül, hogy
type="button"kiváltja a submit eseményt. Jelöld meg explicit módon a cancel és reset gombokat, különben azok is aktiválják a kezelőt.
Őrzés bekapcsolva $valid kényelmi, nem biztonsági ellenőrzés. Az értékeket továbbra is újra kell validálni a szerveren, mielőtt tárolásra kerülnének.
