ng-submit in AngularJS: Formulierverzending afhandelen met een voorbeeld
James Hartman
⚡ Slimme samenvatting
In AngularJS koppelt ng-submit een controllerfunctie aan de submit-gebeurtenis van een formulier in de browser. Hierdoor worden de ingevoerde waarden binnen de controller verwerkt en wordt de pagina nooit opnieuw geladen via een standaard POST-verzoek.
AngularJS ng-submit-richtlijn
De ng-verzenden richtlijn in AngularJS wordt gebruikt om de applicatie te binden aan de submission-gebeurtenis van de browser. Dus in het geval van angularjs tijdens de submission-gebeurtenis kunt u een bepaalde verwerking binnen de controller zelf uitvoeren en vervolgens de verwerkte informatie aan de gebruiker weergeven.
Versie-opmerking: AngularJS 1.x heeft op 31 december 2021 de Long Term Support-status verlaten, en het frameworkteam bevestigt dat De ondersteuning voor AngularJS is officieel beëindigd. in januari 2022, dus er volgen geen releases of beveiligingspatches. Elke stap en elk codeblok hieronder is exact zoals geschreven, als historische referentie. Nieuw werk hoort thuis in het moderne Angular, dat hetzelfde idee uitdrukt als (ngSubmit) gekoppeld aan een FormGroup.
Een formulier indienen in AngularJS met ng-submit
De processen voor het indienen van informatie op een webpagina worden normaal gesproken afgehandeld door de indieningsgebeurtenis in de webbrowser. Deze gebeurtenis wordt normaal gesproken gebruikt om informatie die de gebruiker mogelijk op een webpagina heeft ingevoerd naar de server te sturen voor verdere verwerking, zoals inloggegevens, formuliergegevens, enz. Het indienen van informatie kan worden gedaan via een GET- of POST-verzoek.
Laten we een voorbeeld van het indienen van een Angular-formulier nemen om te zien hoe u formulieren kunt indienen in AngularJS.
In ons AngularJS form submit voorbeeld, gaan we een tekstvak aan de gebruiker presenteren waarin ze het onderwerp kunnen invoeren dat ze willen leren. Er zal een submit knop op de pagina zijn, die wanneer ingedrukt het onderwerp zal toevoegen aan een ongeordende lijst.
De onderstaande afbeelding traces die stromen, van het onderwerp dat in het tekstvak is getypt, via de knop 'Verzenden', naar het lijstitem dat eronder is toegevoegd.
Voorbeeld van AngularJS-formulier indienen
Nu zullen we een voorbeeld zien van het indienen van een AngularJS-formulier door Controller met behulp van de ng-submit-richtlijn:
<!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 Uitleg:
- We definiëren eerst de HTML-tag van ons formulier, die de besturingselementen voor het tekstvak en de verzendknop zal bevatten, zoals weergegeven in het voorbeeld van de Angular-formulierverzending. Vervolgens gebruiken we de AngularJS-richtlijn `ng-submit` om de functie `Display()` aan ons formulier te koppelen. Deze functie wordt gedefinieerd in onze controller en wordt aangeroepen wanneer het formulier wordt verzonden.
- We hebben een tekstbesturingselement waarin de gebruiker het onderwerp invoert dat hij of zij wil leren. Dit zal gebonden zijn aan een variabele genaamd 'Topic' die in onze controller zal worden gebruikt.
- Er is de normale verzendknop in AngularJS waarop de gebruiker klikt wanneer hij het gewenste onderwerp heeft ingevoerd.
- We hebben de ng-herhalen instructie om lijstitems weer te geven van de onderwerpen die de gebruiker invoert. De ng-repeat-richtlijn doorloopt elk onderwerp in de array 'AllTopic' en geeft de onderwerpnaam dienovereenkomstig weer.
- In onze controller declareren we een arrayvariabele genaamd 'AllTopic'. Deze wordt gebruikt om alle onderwerpen op te slaan die de gebruiker in stap 2 heeft ingevoerd.
- We definiëren de code voor onze Display()-functie die wordt aangeroepen wanneer de gebruiker op de knop Verzenden klikt. Hier gebruiken we de push array-functie om de onderwerpen die door de gebruiker zijn ingevoerd via de variabele 'Topic' toe te voegen aan onze array 'AllTopic'.
Als de AngularJS-formuliervoorbeeldcode succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Om de code werkend te zien, voer je eerst een onderwerpnaam in, zoals 'Angular' zoals hierboven weergegeven in het tekstvak, en klik je vervolgens op de knop Verzenden.
- Nadat u op de knop Verzenden hebt geklikt, wordt het item dat u in het tekstvak hebt ingevoerd, toegevoegd aan de lijst met items.
- Dit wordt bereikt door de functie Display(), die wordt aangeroepen wanneer op de knop Verzenden wordt gedrukt.
- De functie Display() voegt de tekst toe aan de arrayvariabele genaamd 'AllTopic'. En onze ng-repeat-richtlijn doorloopt elke waarde in de arrayvariabele 'AllTopic' en geeft ze dienovereenkomstig weer als lijstitems.
ng-submit versus ng-click: welke te gebruiken
Beiden AngularJS-richtlijnen Ze kunnen dezelfde controllerfunctie aanroepen, maar luisteren naar verschillende browsergebeurtenissen. ng-submit zit op de <form> De tag reageert op de submit-gebeurtenis, dus deze wordt ook geactiveerd wanneer een gebruiker op Enter drukt in een veld. ng-click Het apparaat zit op een knop en reageert alleen op een muisklik of een gelijkwaardige activering.
| Aspect | ng-verzenden | ng-klik |
|---|---|---|
| Gastelement | De formuliertag | Elk klikbaar element |
| Evenement beluisterd | verzenden, inclusief de Enter-toets | klik alleen |
| Standaard browser POST | Onderdrukt door de richtlijn | Het blijft vuur geven vanuit een verzendknop. |
| Toegang tot formulierstatus | Leest de waarden $valid en $invalid in de formuliercontroller. | Geen eigen vormcontext |
| natuurlijke pasvorm | Formuliergegevens doorgeven aan een controller | Knoppen, links en modale triggers in de werkbalk |
Toetsenbordondersteuning geeft meestal de doorslag. Een bedraad formulier met ng-click Het programma negeert de Enter-toets, wat frustrerend is voor gebruikers die een inlogformulier moeten invullen. ng-click voor acties die geen formulierinzendingen zijn, zoals het wissen van een veld of het openen van een dialoogvenster.
Waarom ng-submit voorkomt dat de standaard browser de submit-functie gebruikt
Een eenvoudig HTML-formulier reageert op een verzendgebeurtenis door de velden te serialiseren en de browser te vragen een nieuwe pagina te laden, waarbij alle opgeslagen waarden worden verwijderd. $scope. De ng-submit De richtlijn voorkomt dat dit gebeurt: ze roept aan preventDefault() voor jou, zodat de expressie wordt uitgevoerd en de huidige pagina blijft. Nee $event Argumenten zijn niet nodig en er is geen handmatige aanroep vereist.
De onderdrukking kent één gedocumenteerde voorwaarde. Volgens de ngSubmit-referentieDe standaardactie wordt alleen voorkomen zolang het formulier geen inhoud bevat. action, data-action or x-action attribuut. Voeg een van deze toe en de browser navigeert zoals gebruikelijk nadat de handler klaar is, wat het juiste gedrag is voor een server-rendered formulier met progressieve verbetering en een verrassing in alle andere gevallen.
Omdat de instructie het gebeurtenisobject negeert, lees je de ingediende waarden uit de eigenschappen die ng-model schrijf ze naar de scope, of geef ze expliciet door, zoals in ng-submit="Display(Topic)".
Hoe valideer je een formulier voordat ng-submit wordt uitgevoerd?
Het bovenstaande voorbeeld accepteert een leeg onderwerp, omdat er eerst niets in het tekstvak wordt gecontroleerd. AngularJS bouwt een formuliercontroller voor elk benoemd formulier, en die controller geeft de benodigde vlaggen weer om de indiening te controleren. novalidate De browser laat dus zijn eigen HTML5-bubbels uitgeschakeld en AngularJS formulier validatie neemt het over.
- Geef het formulier een
nameAngularJS publiceert een controller met die naam op de omringende componenten. controleur reikwijdte. - Toevoegen
novalidatenaar de formulier-tag, zodat de native browservalidatie niet in de weg zit. - Markeer de velden met behulp van
required,ng-minlength,ng-maxlengthorng-pattern. - Bescherm de begeleider met
$validen geef de formuliercontroller door, zodat de functie de afzonderlijke velden kan inspecteren. - Schakel de knop uit met
ng-disabledwijzend naar$invalid, wat onmiddellijke visuele feedback geeft.
<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>
Twee fouten zijn verantwoordelijk voor de meeste gemelde problemen met dit patroon:
- Double voorlegging. Bindend
ng-clickop de verzendknop terwijlng-submitHet formulier voert de handler twee keer uit, één keer per gebeurtenis. De officiële documentatie waarschuwt tegen het combineren van de twee handlers, dus kies er één. - Onverwachte inzendingen. Elke knop binnen een formulier zonder
type="button"Roept de submit-gebeurtenis op. Markeer de annuleer- en resetknoppen expliciet, anders activeren ze ook de handler.
Bewaking op $valid Het is een handigheidje, geen beveiligingsmaatregel. Waarden moeten nog steeds op de server worden gevalideerd voordat ze worden opgeslagen.
