ng-submit i AngularJS: Håndtering af formularindsendelse med eksempel

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

ng-submit i AngularJS binder en controllerfunktion til browserens submit-hændelse i en formular, så indtastede værdier behandles inde i controlleren, og siden genindlæses aldrig via en standard POST.

  • 🔘 Direktiv rolle: ng-submit binder et AngularJS-udtryk til submit-hændelsen i et formularelement.
  • ☑️ Ingen genindlæsning af siden: Standardbrowserens POST undertrykkes, medmindre formularen indeholder en action-attribut.
  • ✅ Udarbejdet eksempel: En tekstboks plus Display() skubber hvert emne ind i AllTopic-arrayet for ng-repeat.
  • 🧪 Valideringsportal: Parring af $valid med novalidate og ng-disabled blokkerer indsendelse af ufuldstændige data.
  • 🛠️ Almindelig fejl: Bindende ng-klik på send-knappen ved siden af ​​ng-submit forårsager dobbelt indsendelse.
  • 📊 Versionsnotat: AngularJS-understøttelse ophørte i januar 2022; moderne Angular-indsendelser sker via (ngSubmit).
Læs mere

ng-submit-direktivet i AngularJS binder en formular submit-hændelse til en controllerfunktion

AngularJS ng-indsende direktiv

ng-indsende direktiv i AngularJS bruges til at binde applikationen til browserens submit-begivenhed. Så i tilfælde af AngularJS på submit-begivenheden kan du udføre en vis behandling inden for selve controlleren og derefter vise de behandlede oplysninger til brugeren.

Versionsnotat: AngularJS 1.x forlod langtidssupport den 31. december 2021, og framework-teamet bekræfter det. AngularJS-support officielt ophørt i januar 2022, så der følger ingen udgivelser eller sikkerhedsrettelser. Hvert trin og kodeblok nedenfor bevares nøjagtigt som skrevet, som den historiske reference. Nyt arbejde hører hjemme i moderne Angular, som udtrykker den samme idé som (ngSubmit) bundet til en FormGroup.

Sådan indsender du en formular i AngularJS ved hjælp af ng-submit

Processerne med at indsende oplysninger på en webside håndteres normalt af indsendelseshændelsen i webbrowseren. Denne hændelse bruges normalt til at sende information, som brugeren kan have indtastet på en webside, til serveren for yderligere behandling såsom login-legitimationsoplysninger, formulardata osv. Indsendelse af information kan ske via GET- eller POST-anmodning.

Lad os tage et eksempel på indsendelse af Angular-formularer for at se, hvordan du indsender formularer i AngularJS.

I vores AngularJS-formularindsend eksempel vil vi præsentere en tekstboks for brugeren, hvori de kan indtaste det emne, de vil lære. Der vil være en indsend-knap på siden, som når den trykkes vil tilføje emnet til en uordnet liste.

Illustrationen nedenfor tracder flyder, fra det emne, der er skrevet i tekstfeltet, via knappen Send, til det listeelement, der er tilføjet nedenunder.

AngularJS-formular med en emnetekstboks, en Send-knap og den resulterende uordnede liste over emner
Indsendelse af en formular i AngularJS ved hjælp af ng-submit

Eksempel på indsendelse af AngularJS-formular

Nu vil vi se et eksempel på AngularJS-formularindsendelse fra Controller ved hjælp af 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 Forklaring:

  1. Vi deklarerer først vores formulars HTML-tag, som indeholder kontrollen "tekstboks" og "send knap", som vist i Angulars formulars indsendelseshændelseseksempel. Derefter bruger vi ng-submit AngularJS-direktivet til at binde funktionen "Display()" til vores formular. Denne funktion vil blive defineret i vores controller og vil blive kaldt, når formularen indsendes.
  2. Vi har en tekstkontrol, hvor brugeren vil indtaste det emne, de vil lære. Dette vil være bundet til en variabel kaldet 'Emne', som vil blive brugt i vores controller.
  3. Der er den normale submit-knap i AngularJS, som brugeren vil klikke på, når de har indtastet det emne, de ønsker.
  4. Vi har brugt ng-gentag direktiv for at vise listeelementer over de emner, som brugeren indtaster. ng-repeat-direktivet går gennem hvert emne i arrayet 'AllTopic' og viser emnenavnet i overensstemmelse hermed.
  5. I vores controller deklarerer vi en arrayvariabel kaldet 'AllTopic'. Denne vil blive brugt til at indeholde alle de emner, som brugeren indtastede i trin 2.
  6. Vi er ved at definere koden for vores Display() funktion, som vil blive kaldt, hver gang brugeren klikker på knappen Send. Herovre bruger vi push-array-funktionen til at tilføje de emner, som brugeren har indtastet via variablen 'Emne' til vores array 'AllTopic'.

Hvis AngularJS-formeksempelkoden udføres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:

Browseroutput fra AngularJS ng-submit-eksemplet, der viser den tomme emnetekstboks og Send-knappen

For at se koden fungere, skal du først indtaste et emnenavn som "Angular" som vist ovenfor i tekstboksen og derefter klikke på knappen Send.

AngularJS ng-submit output efter at have klikket på Send, med det indtastede emne føjet til listen

  • Når du har klikket på indsend-knappen, vil du se det element, der blev indtastet i tekstboksen, føjet til listen over elementer.
  • Dette opnås ved hjælp af Display()-funktionen, som kaldes, når der trykkes på send-knappen.
  • Funktionen Display() tilføjer teksten til arrayvariablen kaldet 'AllTopic'. Og vores ng-repeat-direktiv går gennem hver værdi i array-variablen 'AllTopic' og viser dem som listeelementer i overensstemmelse hermed.
Gå ikke glip af:

ng-send vs ng-klik: Hvilken skal man bruge

Både AngularJS-direktiver kan kalde den samme controllerfunktion, men de lytter til forskellige browserhændelser. ng-submit sidder på <form> tag og reagerer på submit-hændelsen, så den udløses også, når en bruger trykker på Enter i et felt. ng-click sidder på en knap og reagerer kun på et museklik eller en tilsvarende aktivering.

Aspect ng-indsende ng-klik
Værtselement Formularmærket Ethvert klikbart element
Begivenhed lyttet indsend, inklusive Enter-tasten kun klik
Standardbrowser POST Undertrykt af direktivet Stadig udløses fra en send-knap
Adgang til formularstatus Læser $valid og $invalid på formcontrolleren Ingen egen formkontekst
Naturlig pasform Overdragelse af formulardata til en controller Værktøjslinjeknapper, links, modale udløsere

Tastaturstøtte afgør normalt valget. En formular med kabelforbindelse ng-click alene ignorerer Enter-tasten, hvilket frustrerer brugere, der udfylder et loginfelt. Reserver ng-click for handlinger, der ikke er formularindsendelser, f.eks. at rydde et felt eller åbne en dialogboks.

Hvorfor ng-submit forhindrer standardbrowserens indsendelse

En almindelig HTML-formular reagerer på en submit-hændelse ved at serialisere dens felter og bede browseren om at indlæse en ny side, hvilket kasserer alle værdier, der er indeholdt i $scope. Det ng-submit Direktivet forhindrer det i at ske: det kalder preventDefault() for dig, så udtrykket kører, og den aktuelle side forbliver på plads. Nej $event argument, og der kræves intet manuelt kald.

Undertrykkelsen har én dokumenteret tilstand. Ifølge ngIndsend reference, standardhandlingen forhindres kun, når formularen ikke indeholder nogen action, data-action or x-action attribut. Tilføj en af ​​disse, og browseren navigerer som normalt, når handleren er færdig, hvilket er den korrekte opførsel for en gradvist forbedret server-renderet formular og en overraskelse alle andre steder.

Da direktivet opsluger eventobjektet, skal du læse de indsendte værdier fra de egenskaber, der ng-model skrev på omfanget, eller videregive dem eksplicit, som i ng-submit="Display(Topic)".

Sådan validerer du en formular før ng-submit kører

Eksemplet ovenfor accepterer et tomt emne, fordi intet tjekker tekstfeltet først. AngularJS bygger en formularcontroller for hver navngiven formular, og den controller eksponerer de flag, der er nødvendige for at gate-indsendelse. novalidate så browseren lader sine egne HTML5-bobler være slukkede, og AngularJS formvalidering overtager.

  1. Giv formularen en nameAngularJS udgiver en controller med samme navn på det omgivende netværk. controller rækkevidde.
  2. Tilføj novalidate til formulartagget, så native browservalidering forbliver ude af vejen.
  3. Marker felterne ved hjælp af required, ng-minlength, ng-maxlength or ng-pattern.
  4. Beskyt føreren med $valid, og send formularcontrolleren ind, så funktionen kan inspicere individuelle felter.
  5. Deaktiver knappen med ng-disabled peger på $invalid, som giver øjeblikkelig visuel 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>

To fejl forklarer de fleste rapporterede problemer med dette mønster:

  • Double indsendelse. Binding ng-click på send-knappen, mens ng-submit sidder på formularen kører handleren to gange, én gang pr. begivenhed. Den officielle reference advarer mod at kombinere de to handlere, så vælg én.
  • Uventede indsendelser. Enhver knap i en formular uden type="button" aktiverer send-hændelsen. Marker knapperne "annuller" og "nulstil" eksplicit, ellers udløser de også handleren.

Bevogtning på $valid er en bekvemmelighed, ikke en sikkerhedskontrol. Værdier skal stadig valideres på serveren, før de gemmes.

Ofte Stillede Spørgsmål

Ja. En formular, der indeholder et input eller en knap af typen submit, udløser submit-hændelsen, når der trykkes på Enter i et felt, så ng-submit-udtrykket kører uden nogen ekstra nøglehåndtering.

Nej. Kun formularelementer aktiverer den submit-hændelse, som direktivet lytter efter. Flyt ng-submit til formular-tagget, eller tilføj ng-click til det element, du rent faktisk vil reagere på.

ng-submit sender ingen argumenter. Læs de scope-egenskaber, som ng-model udfyldte, eller send dem eksplicit, for eksempel ng-submit=”Display(Topic)” eller ng-submit=”Display(topicForm)”.

Ja. Hvert formularelement får sin egen formularcontroller, så giv hver formular et unikt navn og bind en separat handler. Deling af én funktion på tværs af formularer inviterer til scope-kollisioner.

Handleren skyder i begge retninger, men et felt uden ng-model skriver aldrig dens værdi til $scope, så funktionen kan ikke læse den. Bind alle input, du planlægger at behandle.

Kompilér formularen i en test, indstil modelværdien på scopet, udløs en submit-hændelse, og sæt derefter assert på det array eller servicekald, som handleren producerer. Karma med Jasmine forbliver den sædvanlige parring.

Sprogmodeller læser den nødvendige modelform og kladde, ng-pattern og ng-minlength attributter plus matchende beskeder, hvilket forvandler meget af AngularJS formvalidering arbejde sig ind i et gennemgangstrin.

GitHub Copilot Agenttilstand omskriver en skabelon til (ngSubmit) med FormGroup og understøtter komponentklassen, men de genererede validatorer og asynkrone kald kræver stadig menneskelig gennemgang og test.

Opsummer dette indlæg med: