ng-submit i AngularJS: Håndter skjemainnsending med eksempel

by: James Hartman James Hartman
Hours oppdatert

⚡ Smart oppsummering

ng-submit i AngularJS binder en kontrollerfunksjon til nettleserens submit-hendelse i et skjema, slik at inntastede verdier behandles inne i kontrolleren og siden aldri lastes inn på nytt via en standard POST.

  • 🔘 Direktivrolle: ng-submit binder et AngularJS-uttrykk til submit-hendelsen til et form-element.
  • ☑️ Ingen sideinnlasting: Standard nettleserens POST undertrykkes med mindre skjemaet har et action-attributt.
  • ✅ Utarbeidet eksempel: En tekstboks pluss Display() skyver hvert emne inn i AllTopic-arrayet for ng-repeat.
  • 🧪 Valideringsport: Å pare $valid med novalidate og ng-disabled blokkerer innsending av ufullstendige data.
  • 🛠️ Vanlig feil: Bindende ng-klikk på send-knappen ved siden av ng-submit forårsaker dobbel innsending.
  • 📊 Versjonsmerknad: AngularJS-støtten ble avsluttet i januar 2022; moderne Angular sender inn via (ngSubmit).
Les mer

ng-submit-direktivet i AngularJS binder en form submit-hendelse til en kontrollerfunksjon

AngularJS ng-send-direktiv

Ocuco ng-send inn direktiv i AngularJS brukes til å binde applikasjonen til innsendingshendelsen til nettleseren. Så i tilfelle av AngularJS på innsendingshendelsen kan du utføre en del behandling i selve kontrolløren og deretter vise den behandlede informasjonen til brukeren.

Versjonsmerknad: AngularJS 1.x forlot langtidsstøtten 31. desember 2021, og rammeverksteamet bekrefter det. AngularJS-støtten er offisielt avsluttet i januar 2022, så ingen utgivelser eller sikkerhetsoppdateringer følger. Hvert trinn og kodeblokk nedenfor beholdes nøyaktig som skrevet, som den historiske referansen. Nytt arbeid hører hjemme i moderne Angular, som uttrykker den samme ideen som (ngSubmit) bundet til en FormGroup.

Hvordan sende inn et skjema i AngularJS ved å bruke ng-submit

Prosessene for å sende inn informasjon på en nettside håndteres normalt av innsendingshendelsen i nettleseren. Denne hendelsen brukes vanligvis til å sende informasjon som brukeren kan ha skrevet inn på en nettside til serveren for videre behandling som påloggingsinformasjon, skjemadata osv. Innsending av informasjon kan gjøres gjennom GET eller POST-forespørsel.

La oss ta et eksempel på et Angular-skjema for å se hvordan du sender inn skjemaer i AngularJS.

I vårt AngularJS-innsendingseksempel skal vi presentere en tekstboks for brukeren der de kan skrive inn emnet de vil lære. Det vil være en send-knapp på siden, som når den trykkes vil legge emnet til en uordnet liste.

Illustrasjonen nedenfor tracsom flyter, fra emnet som er skrevet inn i tekstboksen, via Send-knappen, til listeelementet som er lagt til under.

AngularJS-skjema med en emnetekstboks, en Send-knapp og den resulterende uordnede listen over emner
Sende inn et skjema i AngularJS ved å bruke ng-submit

Eksempel på innsending av AngularJS-skjema

Nå vil vi se et eksempel på innsending av AngularJS-skjema fra kontrollør som bruker 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. Først deklarerer vi HTML-taggen for skjemaet vårt, som vil inneholde kontrollene «tekstboks» og «send-knapp», som vist i eksemplet på Angulars form submit-hendelse. Deretter bruker vi ng-submit AngularJS-direktivet for å binde funksjonen «Display()» til skjemaet vårt. Denne funksjonen vil bli definert i kontrolleren vår og vil bli kalt når skjemaet sendes inn.
  2. Vi har en tekstkontroll der brukeren skal skrive inn emnet de ønsker å lære. Dette vil være bundet til en variabel kalt 'Tema' som vil bli brukt i kontrolleren vår.
  3. Det er den vanlige send-knappen i AngularJS som brukeren vil klikke når de har skrevet inn emnet de ønsker.
  4. Vi har brukt ng-gjenta direktiv for å vise listeelementer over emnene brukeren skriver inn. ng-repeat-direktivet går gjennom hvert emne i arrayen 'AllTopic' og viser emnenavnet tilsvarende.
  5. I kontrolleren vår deklarerer vi en arrayvariabel kalt «AllTopic». Denne vil bli brukt til å inneholde alle emnene som ble angitt av brukeren i trinn 2.
  6. Vi definerer koden for Display()-funksjonen vår som kalles opp hver gang brukeren klikker på Send-knappen. Her bruker vi push-array-funksjonen for å legge til emnene som er lagt inn av brukeren via variabelen 'Emne' i vår matrise 'AllTopic'.

Hvis eksempelkoden for AngularJS-formen er utført vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:

Nettleserutdata fra AngularJS ng-submit-eksemplet som viser den tomme emnetekstboksen og Send-knappen

For å se at koden fungerer, skriv først inn et emnenavn som "Angular" som vist ovenfor i tekstboksen og klikk deretter på Send-knappen.

AngularJS ng-submit-utdata etter å ha klikket på Send, med det angitte emnet lagt til i listen

  • Etter at du har klikket på send-knappen, vil du se elementet som ble lagt inn i tekstboksen lagt til i listen over elementer.
  • Dette oppnås av Display()-funksjonen, som kalles opp når send-knappen trykkes.
  • Display()-funksjonen legger til teksten til matrisevariabelen kalt 'AllTopic'. Og vårt ng-repeat-direktiv går gjennom hver verdi i matrisevariabelen 'AllTopic' og viser dem som listeelementer tilsvarende.

RELATERTE ARTIKLER

ng-send vs ng-klikk: Hvilken du skal bruke

Begge AngularJS-direktiver kan kalle den samme kontrollerfunksjonen, men de lytter til forskjellige nettleserhendelser. ng-submit sitter på <form> taggen og reagerer på submit-hendelsen, slik at den også utløses når en bruker trykker Enter i et felt. ng-click sitter på en knapp og reagerer bare på et museklikk eller en tilsvarende aktivering.

Aspekt ng-send inn ng-klikk
Vertselement Skjema-taggen Ethvert klikkbart element
Hendelsen ble lyttet til send inn, inkludert Enter-tasten bare klikk
Standard nettleser POST Undertrykt av direktivet Utløses fortsatt fra en send-knapp
Tilgang til skjemastatus Leser $valid og $invalid på skjemakontrolleren Ingen egen formkontekst
Naturlig passform Overføring av skjemadata til en kontrollør Verktøylinjeknapper, lenker, modale utløsere

Tastaturstøtte avgjør vanligvis valget. Et skjema koblet til ng-click alene ignorerer Enter-tasten, noe som frustrerer brukere som fyller ut en påloggingsboks. Reserver ng-click for handlinger som ikke er skjemainnsendinger, for eksempel å tømme et felt eller åpne en dialogboks.

Hvorfor ng-submit forhindrer standard nettleserinnsending

Et vanlig HTML-skjema reagerer på en «send»-hendelse ved å serialisere feltene og be nettleseren om å laste inn en ny side, som forkaster alle verdier som finnes i $scope. De ng-submit Direktivet hindrer at det skjer: det kaller preventDefault() for deg, slik at uttrykket kjører og gjeldende side forblir på plass. Nei $event argument og ingen manuell kalling er nødvendig.

Undertrykkelsen har én dokumentert tilstand. I følge ngSend inn referanse, standardhandlingen forhindres bare når skjemaet ikke inneholder noe action, data-action or x-action attributt. Legg til hvilken som helst av disse, og nettleseren navigerer som vanlig etter at behandleren er ferdig, noe som er riktig oppførsel for et gradvis forbedret server-gjengitt skjema og en overraskelse overalt ellers.

Fordi direktivet sluker hendelsesobjektet, les innsendte verdier fra egenskapene som ng-modell skrev på omfanget, eller sendte dem eksplisitt, som i ng-submit="Display(Topic)".

Slik validerer du et skjema før ng-submit kjøres

Eksemplet ovenfor godtar et tomt emne, fordi ingenting sjekker tekstboksen først. AngularJS bygger en skjemakontroller for hvert navngitte skjema, og den kontrolleren eksponerer flaggene som trengs for å portere innsending. novalidate så nettleseren lar sine egne HTML5-bobler være avslått og AngularJS formvalidering tar over.

  1. Gi skjemaet en nameAngularJS publiserer en kontroller med det navnet på det omkringliggende controller omfang.
  2. Legg til novalidate til skjemataggen slik at validering av den innebygde nettleseren ikke er i veien.
  3. Merk feltene ved hjelp av required, ng-minlength, ng-maxlength or ng-pattern.
  4. Beskytt føreren med $valid, og send inn skjemakontrolleren slik at funksjonen kan inspisere individuelle felt.
  5. Deaktiver knappen med ng-disabled peker på $invalid, som gir umiddelbar visuell tilbakemelding.
<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 feil står for de fleste rapporterte problemene med dette mønsteret:

  • Double innlevering. Bindende ng-click på send-knappen mens ng-submit sitter på skjemaet kjører behandleren to ganger, én gang per hendelse. Den offisielle referansen advarer mot å kombinere de to behandlerne, så velg én.
  • Uventede innsendinger. Enhver knapp i et skjema uten type="button" hever send-hendelsen. Marker avbryt- og tilbakestillingsknappene eksplisitt, ellers utløser de også behandleren.

Vakt på $valid er en bekvemmelighet, ikke en sikkerhetskontroll. Verdier må fortsatt valideres på nytt på serveren før de lagres.

Spørsmål og svar

Ja. Et skjema som inneholder en input eller knapp av typen submit, utløser submit-hendelsen når Enter trykkes inne i et felt, slik at ng-submit-uttrykket kjøres uten noen ekstra nøkkelbehandler.

Nei. Bare skjemaelementer genererer submit-hendelsen som direktivet lytter etter. Flytt ng-submit til skjemataggen, eller legg ng-click til elementet du faktisk vil reagere på.

ng-submit sender ingen argumenter. Les omfangsegenskapene som ng-model fylte ut, eller send dem eksplisitt inn, for eksempel ng-submit=”Display(Topic)” eller ng-submit=”Display(topicForm)”.

Ja. Hvert skjemaelement får sin egen skjemakontroller, så gi hvert skjema et unikt navn og bind en separat behandler. Deling av én funksjon på tvers av skjemaer inviterer til kollisjoner med omfang.

Handleren skyter uansett, men et felt uten ng-modell skriver aldri verdien til $scope, så funksjonen kan ikke lese den. Bind alle input du planlegger å behandle.

Kompiler skjemaet i en test, angi modellverdien på omfanget, utløs en submit-hendelse, og bruk deretter assert på arrayet eller tjenestekallet som behandleren produserer. Karma med Jasmine er fortsatt den vanlige sammenkoblingen.

Språkmodeller leser modellformen og utkastet som kreves, ng-pattern og ng-minlength-attributtene pluss matchende meldinger, noe som gjør mye av AngularJS formvalidering arbeid inn i et gjennomgangstrinn.

GitHub Copilot Agentmodus omskriver en mal til (ngSubmit) med FormGroup og støtter komponentklassen, men de genererte validatorene og asynkrone kallene trenger fortsatt menneskelig gjennomgang og tester.

Oppsummer dette innlegget med: