ng-submit AngularJS-is: vormi esitamise käsitlemine näite abil

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

AngularJS-i ng-submit seob kontrolleri funktsiooni vormi brauseri submit-sündmusega, nii et sisestatud väärtused töödeldakse kontrolleris ja leht ei lae kunagi uuesti vaikimisi POST-i kaudu.

  • 🔘 Juhise roll: ng-submit seob AngularJS-i avaldise vormielemendi submit-sündmusega.
  • ☑️ Lehe uuesti laadimist ei toimu: Vaikimisi brauseri POST-käsk on alla surutud, välja arvatud juhul, kui vormil on atribuut action.
  • ✅ Töötatud näide: Tekstiväli koos funktsiooniga Display() saadab iga teema ng-repeat jaoks AllTopic massiivi.
  • 🧪 Valideerimisvärav: $valid sidumine novalidate ja ng-disabled funktsioonidega blokeerib mittetäielike andmete esitamise.
  • 🛠️ Levinud viga: NG-submit kõrval asuval esitamise nupul klõpsamine siduva ng-klõpsuga põhjustab topeltesitamise.
  • 📊 Versiooni märkus: AngularJS tugi lõppes jaanuaris 2022; tänapäevane Angular esitab andmed läbi (ngSubmit).
Loe rohkem

ng-submit direktiiv AngularJS-is, mis seob vormi submit sündmuse kontrolleri funktsiooniga

AngularJS ng-submit direktiiv

. ng-submit AngularJS-i direktiivi kasutatakse rakenduse sidumiseks brauseri saatmissündmusega. Nii et juhul AngularJS esitamise sündmusel saate töötlemistoiminguid teostada vastutava töötleja enda sees ja seejärel kuvada töödeldud teavet kasutajale.

Versiooni märkus: AngularJS 1.x lahkus pikaajalisest toest 31. detsembril 2021 ja raamistiku meeskond kinnitab seda AngularJS tugi ametlikult lõppenud jaanuaris 2022, seega ei järgne mingeid väljaandeid ega turvaparandusi. Iga allpool olev samm ja koodiplokk on täpselt nii kirjutatud kui ajalooline viide. Uus töö kuulub tänapäevasesse Angularisse, mis väljendab sama ideed mis (ngSubmit) seotud vormigrupiga.

Kuidas esitada vorm AngularJS-is, kasutades funktsiooni ng-submit

Veebilehe teabe esitamise protsesse käsitleb tavaliselt veebibrauseris esitamise sündmus. Seda sündmust kasutatakse tavaliselt kasutaja poolt veebilehele sisestatud teabe (nt sisselogimismandaadid, vormiandmed jne) saatmiseks serverisse edasiseks töötlemiseks. Teabe edastamine toimub GET- või POST-päringu kaudu.

Võtame Angular vormi esitamise näite, et näha, kuidas AngularJS-is vorme esitada.

Meie AngularJS-i vormi esitamise näites esitame kasutajale tekstikasti, kuhu nad saavad sisestada teema, mida nad soovivad õppida. Lehel on esitamisnupp, millele vajutades lisatakse teema järjestamata nimekirja.

Allolev illustratsioon tracmis liiguvad tekstikasti sisestatud teemast läbi nupu „Esita“ selle alla lisatud loendiüksuseni.

AngularJS vorm teema tekstikasti, nupu „Esita“ ja sellest tuleneva järjestamata teemade loendiga
Vormi esitamine AngularJS-is ng-submit abil

AngularJS vormi esitamise näide

Nüüd näeme näidet AngularJS-vormingust, mis esitatakse kontrollerilt, kasutades käskkirja ng-submit:

<!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 Selgitus:

  1. Esmalt deklareerime vormi HTML-sildi, mis sisaldab tekstikasti ja esitamisnuppu, nagu on näidatud Angular-vormi esitamissündmuse näites. Seejärel kasutame ng-submit AngularJS direktiivi, et siduda funktsioon „Display()” meie vormiga. See funktsioon defineeritakse meie kontrolleris ja seda kutsutakse vormi esitamisel.
  2. Meil on teksti juhtelement, millesse kasutaja sisestab teema, mida ta soovib õppida. See seotakse muutujaga „Teema”, mida kasutatakse meie kontrolleris.
  3. AngularJS-is on tavaline saatmisnupp, mida kasutaja klõpsab, kui ta on soovitud teema sisestanud.
  4. Oleme kasutanud ng-korda käsk, et kuvada kasutaja sisestatud teemade loendi üksused. Direktiiv ng-repeat läbib iga teema massiivi 'AllTopic' ja kuvab vastavalt teema nime.
  5. Meie kontrolleris deklareerime massiivimuutuja nimega 'AllTopic'. Seda kasutatakse kõigi 2. etapis kasutaja sisestatud teemade hoidmiseks.
  6. Määratleme oma funktsiooni Display() koodi, mida kutsutakse välja iga kord, kui kasutaja klõpsab nuppu Esita. Siin kasutame tõukemassiivi funktsiooni, et lisada kasutaja poolt muutuja 'Teema' kaudu sisestatud teemad meie massiivi 'AllTopic'.

Kui AngularJS-i vormi näidiskood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:

AngularJS ng-submit näite brauseri väljund, mis näitab tühja teema tekstikasti ja nuppu „Esita”

Koodi toimimise nägemiseks sisestage esmalt teema nimi, nagu "nurkne", nagu ülal tekstikastis näidatud, ja seejärel klõpsake nuppu Esita.

AngularJS ng-submit väljund pärast nupule „Esita“ klõpsamist, sisestatud teema lisatakse loendisse

  • Pärast esitamisnupul klõpsamist näete tekstikasti sisestatud elementi lisatud üksuste loendisse.
  • See saavutatakse funktsiooni Display() abil, mida kutsutakse esitamisnupu vajutamisel.
  • Funktsioon Display() lisab teksti massiivi muutujale nimega 'AllTopic'. Ja meie ng-repeat direktiiv läbib iga väärtuse massiivimuutujas 'AllTopic' ja kuvab need vastavalt loendiüksustena.

SEOTUD ARTIKLID

ng-submit vs ng-click: kumba kasutada

Mõlemad AngularJS direktiivid saavad kutsuda sama kontrolleri funktsiooni, kuid nad kuulavad erinevaid brauseri sündmusi. ng-submit istub <form> silt ja reageerib submit-sündmusele, seega käivitub see ka siis, kui kasutaja vajutab väljal sisestusklahvi (Enter). ng-click asub nupul ja reageerib ainult hiireklõpsule või samaväärsele aktiveerimisele.

Aspekt ng-submit ng-klõps
Host-element Vormi silt Mis tahes klõpsatav element
Sündmust kuulati esita, sealhulgas sisestusklahv (Enter) ainult klõps
Vaikimisi brauseri POST Direktiiv surub maha Käivitub ikka saatmisnupust
Juurdepääs vormi olekule Loeb vormikontrollerilt väärtused $valid ja $invalid Omaette vormikonteksti puudumine
Loomulik sobivus Vormiandmete edastamine kontrollerile Tööriistariba nupud, lingid, modaalsed päästikud

Tavaliselt määrab valiku klaviatuuri tugi. Juhtmega vorm ng-click üksi ignoreerib sisestusklahvi (Enter), mis tekitab kasutajatel sisselogimiskasti täitmisel frustratsiooni. ng-click toimingute puhul, mis ei ole vormi esitamised, näiteks välja tühjendamine või dialoogi avamine.

Miks ng-submit takistab vaikimisi brauseri esitamist?

Lihtne HTML-vorm reageerib submit-sündmusele oma väljade serialiseerimisega ja palub brauseril laadida uus leht, mis kustutab kõik vormis olevad väärtused. $scope. ng-submit direktiiv takistab selle toimumist: see kutsub üles preventDefault() sinu jaoks, nii et avaldis käivitub ja praegune leht jääb paigale. Ei $event argumenti ja käsitsi kutsumist pole vaja.

Summutamisel on üks dokumenteeritud tingimus. Vastavalt Esita viide, vaikimisi toiming on keelatud ainult siis, kui vormil puudub action, data-action or x-action atribuut. Lisage ükskõik milline neist ja brauser navigeerib pärast käitleja lõpetamist tavapäraselt, mis on korrektne käitumine järk-järgult täiustatud serveri poolt renderdatud vormi puhul ja üllatus kõikjal mujal.

Kuna direktiiv neelab sündmuseobjekti, loe esitatud väärtused omadustest, mis ng-mudel kirjutas ulatusse või edastas need selgesõnaliselt, nagu näiteks ng-submit="Display(Topic)".

Kuidas vormi enne ng-submit käivitamist valideerida

Ülaltoodud näide aktsepteerib tühja teemat, kuna miski ei kontrolli esmalt tekstikasti. AngularJS loob iga nimega vormi jaoks vormikontrolleri ja see kontroller kuvab esitamise suunamiseks vajalikud lipud. novalidate seega jätab brauser oma HTML5 mullid välja lülitatuks ja AngularJS vormi valideerimine võtab üle.

  1. Anna vormile a nameAngularJS avaldab selle nimega kontrolleri ümbritseval kontroller ulatus.
  2. lisama novalidate vormimärgendile, et brauseri natiivne valideerimine ei segaks.
  3. Märkige väljad, kasutades required, ng-minlength, ng-maxlength or ng-pattern.
  4. Kaitse koerajuhti $validja edastage vormikontroller, et funktsioon saaks üksikuid välju kontrollida.
  5. Keela nupp, kasutades ng-disabled osutades $invalid, mis annab kohest visuaalset tagasisidet.
<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>

Selle mustri puhul esinevate probleemide põhjuseks on enamasti kaks viga:

  • Double esitamist. Siduv ng-click saatmisnupul samal ajal ng-submit istub vormil ja käivitab käitleja kaks korda, üks kord iga sündmuse kohta. Ametlik viide hoiatab kahe käitleja kombineerimise eest, seega vali üks.
  • Ootamatud esitused. Mistahes nupp vormil ilma type="button" käivitab submit sündmuse. Märgi tühistamis- ja lähtestamisnupud selgesõnaliselt, vastasel juhul käivitavad need ka käitleja.

Valvamine peal $valid on mugavus, mitte turvakontroll. Väärtused tuleb enne salvestamist serveris uuesti valideerida.

KKK

Jah. Vorm, mis sisaldab sisendit või nuppu tüübiga „submit“, käivitab sündmuse „submit“, kui välja sees vajutatakse Enter, seega ng-submit avaldis töötab ilma täiendava võtmekäitlejata.

Ei. Ainult vormielemendid käivitavad submit-sündmuse, mida direktiiv jälgib. Liigutage ng-submit vormi sildile või lisage ng-click elemendile, millele tegelikult reageerida soovite.

ng-submit ei edasta argumente. Loe ng-model'i poolt täidetud ulatuse omadusi või edasta need selgesõnaliselt, näiteks ng-submit=”Display(Topic)” või ng-submit=”Display(topicForm)”.

Jah. Igal vormielemendil on oma vormikontroller, seega andke igale vormile unikaalne nimi ja siduge eraldi käitleja. Ühe funktsiooni jagamine vormide vahel kutsub esile ulatuse kokkupõrkeid.

Käitleja tulistab mõlemale poole, aga väli ilma ng-mudel ei kirjuta kunagi oma väärtust $scope'i, seega funktsioon ei saa seda lugeda. Seo iga sisend, mida kavatsed töödelda.

Kompileeri vorm testis, määra ulatusele mudeli väärtus, käivita submit sündmus ja seejärel esita assert massiivi või teenusekõne puhul, mille töötleja toodab. Karma ja Jasmine jäävad tavapäraseks paaristuseks.

Keelemudelid loevad mudeli kuju ja vajaliku mustandi, ng-pattern ja ng-minlength atribuute ning vastavaid sõnumeid, mis muudab AngularJS-i palju keerulisemaks. vormi valideerimine töötage läbivaatamise etapis välja.

GitHubi koopia Agendirežiim kirjutab malli FormGroupiga ümber vormiks (ngSubmit) ja loob komponendiklassi, kuid genereeritud validaatorid ja asünkroonsed kõned vajavad ikkagi inimese ülevaatust ja testimist.

Võta see postitus kokku järgmiselt: