ng-submit i AngularJS: Hantera formulärinlämning med exempel

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

ng-submit i AngularJS binder en kontrollfunktion till webbläsarens submit-händelse i ett formulär, så att inmatade värden bearbetas inuti kontrollenheten och sidan aldrig laddas om via en standard-POST.

  • 🔘 Direktivroll: ng-submit binder ett AngularJS-uttryck till submit-händelsen i ett formulärelement.
  • ☑️ Ingen sidladdning: Standardwebbläsarens POST undertrycks om inte formuläret har ett action-attribut.
  • ✅ Utarbetat exempel: En textruta plus Display() placerar varje ämne i AllTopic-arrayen för ng-repeat.
  • 🧪 Valideringsgrind: Att para ihop $valid med novalidate och ng-disabled blockerar inlämning av ofullständiga data.
  • 🛠️ Vanligt misstag: Bindande ng-klick på skicka-knappen bredvid ng-submit orsakar dubbel inlämning.
  • 📊 Versionsnotering: Stödet för AngularJS upphörde i januari 2022; moderna Angular-användare skickar via (ngSubmit).
Läs mer

ng-submit-direktivet i AngularJS binder en form submit-händelse till en kontrollerfunktion

AngularJS ng-submit-direktiv

Ocuco-landskapet ng-submit direktiv i AngularJS används för att binda applikationen till webbläsarens submit-händelse. Så i fallet med AngularJS på submit-händelsen kan du utföra viss behandling inom den registeransvarige själv och sedan visa den behandlade informationen för användaren.

Versionsnotering: AngularJS 1.x lämnade långtidssupporten den 31 december 2021, och ramverksteamet bekräftar det. Stödet för AngularJS har officiellt upphört i januari 2022, så inga utgåvor eller säkerhetsuppdateringar följer. Varje steg och kodblock nedan behålls exakt som skrivet, som historisk referens. Nytt arbete hör hemma i moderna Angular, vilket uttrycker samma idé som (ngSubmit) bunden till en FormGroup.

Hur man skickar in ett formulär i AngularJS med ng-submit

Processerna för att skicka information på en webbsida hanteras normalt av submit-händelsen i webbläsaren. Denna händelse används normalt för att skicka information som användaren kan ha angett på en webbsida till servern för vidare bearbetning som inloggningsuppgifter, formulärdata, etc. Inlämning av information kan göras genom GET- eller POST-förfrågan.

Låt oss ta ett exempel på ett Angular-formulär för att se hur man skickar in formulär i AngularJS.

I vårt AngularJS-formulärsexempel kommer vi att presentera en textruta för användaren där de kan skriva in det ämne de vill lära sig. Det kommer att finnas en skicka-knapp på sidan, som när den trycks kommer att lägga till ämnet till en oordnad lista.

Illustrationen nedan tracsom flyter, från det ämne som skrivits i textrutan, via knappen Skicka, till listobjektet som läggs till under.

AngularJS-formulär med en ämnestextruta, en Skicka-knapp och den resulterande oordnade listan över ämnen
Skicka ett formulär i AngularJS med ng-submit

AngularJS Form Submit Exempel

Nu kommer vi att se ett exempel på AngularJS-formulär som skickas från Controller med ng-submit-direktivet:

<!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 Förklaring:

  1. Vi deklarerar först vår HTML-tagg för formuläret, som kommer att innehålla kontrollen "text box" och "submit button" som visas i Angular-formulärets skickahändelseexempel. Sedan använder vi ng-submit AngularJS-direktivet för att binda funktionen "Display()" till vårt formulär. Denna funktion kommer att definieras i vår controller och kommer att anropas när formuläret skickas.
  2. Vi har en textkontroll där användaren anger det ämne de vill lära sig. Detta kommer att vara bundet till en variabel som heter 'Ämne' som kommer att användas i vår styrenhet.
  3. Det finns den normala skicka-knappen i AngularJS som användaren kommer att klicka på när de har skrivit in det ämne de vill ha.
  4. Vi har använt ng-upprepa direktiv för att visa listobjekt över de ämnen som användaren anger. Direktivet ng-repeat går igenom varje ämne i arrayen 'AllTopic' och visar ämnesnamnet därefter.
  5. I vår kontroller deklarerar vi en arrayvariabel som heter "AllTopic". Denna kommer att användas för att lagra alla ämnen som angavs av användaren i steg 2.
  6. Vi definierar koden för vår Display() funktion som kommer att anropas när användaren klickar på knappen Skicka. Här borta använder vi push array-funktionen för att lägga till de ämnen som användaren matat in via variabeln 'Ämne' i vår array 'AllTopic'.

Om AngularJS-formexempelkoden exekveras framgångsrikt, kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:

Webbläsarutdata från AngularJS ng-submit-exemplet som visar den tomma ämnestextrutan och knappen Skicka

För att se koden fungera, ange först ett ämnesnamn som "Angular" som visas ovan i textrutan och klicka sedan på knappen Skicka.

AngularJS ng-submit-utdata efter att ha klickat på Skicka, med det angivna ämnet tillagt i listan

  • När du har klickat på knappen Skicka kommer du att se objektet som skrevs in i textrutan som lagts till i listan över objekt.
  • Detta uppnås med Display()-funktionen, som anropas när du trycker på knappen Skicka.
  • Funktionen Display() lägger till texten i arrayvariabeln som heter 'AllTopic'. Och vårt ng-repeat-direktiv går igenom varje värde i arrayvariabeln 'AllTopic' och visar dem som listobjekt därefter.

RELATERADE ARTIKLAR

ng-submit vs ng-click: Vilken ska du använda

Både AngularJS-direktiv kan anropa samma kontrollfunktion, men de lyssnar på olika webbläsarhändelser. ng-submit sitter på <form> taggen och reagerar på submit-händelsen, så den utlöses även när en användare trycker på Enter i ett fält. ng-click sitter på en knapp och reagerar bara på ett musklick eller motsvarande aktivering.

Aspect ng-submit ng-klicka
Värdelement Formulärtaggen Alla klickbara element
Händelse avlyssnad skicka, inklusive Enter-tangenten bara klicka
Standardwebbläsarens POST Undertryckt av direktivet Fortfarande aktiverad från en skicka-knapp
Åtkomst till formulärstatus Läser $valid och $invalid på formulärkontrollanten Ingen egen formkontext
Naturlig passform Överlämna formulärdata till en kontrollant Verktygsfältsknappar, länkar, modala utlösare

Tangentbordsstöd avgör vanligtvis valet. En formulär kopplad till ng-click ignorerar enbart Enter-tangenten, vilket frustrerar användare som fyller i en inloggningsruta. Reservera ng-click för åtgärder som inte är formulärinlämningar, till exempel att rensa ett fält eller öppna en dialogruta.

Varför ng-submit förhindrar standardwebbläsarens inlämning

Ett vanligt HTML-formulär reagerar på en submit-händelse genom att serialisera sina fält och be webbläsaren att ladda en ny sida, vilket ignorerar alla värden som finns i $scope. De ng-submit direktivet hindrar det från att hända: det anropar preventDefault() för dig, så uttrycket körs och den aktuella sidan förblir på plats. $event argument och inget manuellt anrop krävs.

Undertryckandet har ett dokumenterat tillstånd. Enligt ngSkicka referens, standardåtgärden förhindras endast när formuläret inte innehåller något action, data-action or x-action attribut. Lägg till något av dessa så navigerar webbläsaren som vanligt efter att hanteraren är klar, vilket är korrekt beteende för ett progressivt förbättrat serverrenderat formulär och en överraskning överallt annars.

Eftersom direktivet sväljer händelseobjektet, läs inskickade värden från egenskaperna som ng-modell skrev på omfånget, eller skickade dem explicit, som i ng-submit="Display(Topic)".

Hur man validerar ett formulär innan ng-submit körs

Exemplet ovan accepterar ett tomt ämne, eftersom ingenting kontrollerar textrutan först. AngularJS bygger en formulärkontrollant för varje namngivet formulär, och den kontrollanten exponerar de flaggor som behövs för att grinda inlämning. novalidate så webbläsaren lämnar sina egna HTML5-bubblor avstängda och AngularJS formvalidering tar över.

  1. Ge formuläret en nameAngularJS publicerar en kontroller med det namnet på den omgivande styrenhet omfattning.
  2. Lägg till novalidate till formulärtaggen så att validering av inbyggd webbläsare inte är i vägen.
  3. Markera fälten med hjälp av required, ng-minlength, ng-maxlength or ng-pattern.
  4. Skydda föraren med $validoch skicka in formulärkontrollanten så att funktionen kan inspektera enskilda fält.
  5. Inaktivera knappen med ng-disabled pekar på $invalid, vilket ger omedelbar visuell feedback.
<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>

Två misstag står för de flesta rapporterade problemen med detta mönster:

  • Double underkastelse. Bindning ng-click på skicka-knappen medan ng-submit sitter på formuläret kör hanteraren två gånger, en gång per händelse. Den officiella referensen varnar för att kombinera de två hanterarna, så välj en.
  • Oväntade inskickningar. Vilken knapp som helst i ett formulär utan type="button" utlöser händelsen submit. Markera knapparna för avbryt och återställ explicit, annars utlöser de även hanteraren.

Bevakning på $valid är en bekvämlighet, inte en säkerhetskontroll. Värden måste fortfarande valideras på nytt på servern innan de lagras.

Vanliga frågor

Ja. Ett formulär som innehåller en inmatningsknapp eller knapp av typen submit utlöser submit-händelsen när Enter trycks ner i ett fält, så ng-submit-uttrycket körs utan någon extra nyckelhanterare.

Nej. Endast formulärelement genererar händelsen submit som direktivet lyssnar efter. Flytta ng-submit till formulärtaggen eller lägg till ng-click till det element du faktiskt vill reagera på.

ng-submit skickar inga argument. Läs omfångsegenskaperna som ng-model fyllde i, eller skicka dem explicit, till exempel ng-submit=”Display(Topic)” eller ng-submit=”Display(topicForm)”.

Ja. Varje formulärelement får sin egen formulärkontroller, så ge varje formulär ett unikt namn och bind en separat hanterare. Att dela en funktion över flera formulär inbjuder till kollisioner i omfånget.

Föraren skjuter åt båda hållen, men ett fält utan ng-modell skriver aldrig dess värde till $scope, så funktionen kan inte läsa det. Bind alla indata du planerar att bearbeta.

Kompilera formuläret i ett test, ange modellvärdet på omfånget, utlös en submit-händelse och använd sedan assert på arrayen eller serviceanropet som hanteraren producerar. Karma med Jasmine förblir den vanliga parningen.

Språkmodeller läser modellens form och utkast, attributen ng-pattern och ng-minlength plus matchande meddelanden, vilket gör att mycket av AngularJS... formvalidering arbeta sig in i ett granskningssteg.

GitHub Copilot Agentläget skriver om en mall till (ngSubmit) med FormGroup och stöder komponentklassen, men de genererade valideringsverktygen och asynkrona anropen behöver fortfarande granskas och tester av människor.

Sammanfatta detta inlägg med: