ng-submit AngularJS:ssä: Lomakkeen lähetyksen käsittely esimerkin avulla

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

AngularJS:n ng-submit sitoo ohjainfunktion lomakkeen selaimen lähetystapahtumaan, joten syötetyt arvot käsitellään ohjaimen sisällä eikä sivu koskaan lataudu uudelleen oletusarvoisen POST-kutsufunktion kautta.

  • 🔘 Direktiivin rooli: ng-submit sitoo AngularJS-lausekkeen lomake-elementin submit-tapahtumaan.
  • ☑️ Ei sivun uudelleenlatausta: Oletusarvoinen selaimen POST-kutsu estetään, ellei lomakkeella ole toimintoattribuuttia.
  • ✅ Toimiva esimerkki: Tekstilaatikko ja Display()-funktio lisäävät jokaisen aiheen AllTopic-taulukkoon ng-repeat-funktiota varten.
  • 🧪 Validointiportti: $valid-parametrin yhdistäminen novalidate- ja ng-disabled-parametreihin estää epätäydellisten tietojen lähettämisen.
  • 🛠️ Yleinen virhe: NG-submit-painikkeen vieressä olevan lähetyspainikkeen ng-klikkaus aiheuttaa kaksinkertaisen lähetyksen.
  • 📊 Versiohuomautus: AngularJS-tuki päättyi tammikuussa 2022; nykyaikainen Angular lähettää tiedot ngSubmit-funktion kautta.
Lue lisää

ng-submit-direktiivi AngularJS:ssä, joka sitoo lomakkeen lähetystapahtuman ohjainfunktioon

AngularJS ng-submit -direktiivi

ng-submit AngularJS:n direktiiviä käytetään sitomaan sovellus selaimen lähetystapahtumaan. Joten tapauksessa angularjs lähetystapahtumassa voit suorittaa jonkin verran käsittelyä itse rekisterinpitäjässä ja näyttää sitten käsitellyt tiedot käyttäjälle.

Versiohuomautus: AngularJS 1.x jätti pitkäaikaisen tuen 31. joulukuuta 2021, ja framework-tiimi vahvistaa, että AngularJS-tuki päättyi virallisesti tammikuussa 2022, joten julkaisuja tai tietoturvapäivityksiä ei seuraa. Jokainen alla oleva vaihe ja koodilohko säilytetään täsmälleen sellaisenaan, kuten historiallisessa viitteessä. Uusi työ kuuluu moderniin Angulariin, joka ilmaisee saman ajatuksen kuin (ngSubmit) sidottu FormGroup-ryhmään.

Lomakkeen lähettäminen AngularJS:ssä ng-submitilla

Tietojen lähetysprosessit verkkosivulla käsitellään tavallisesti verkkoselaimen lähetystapahtumassa. Tätä tapahtumaa käytetään tavallisesti lähettämään palvelimelle tietoja, jotka käyttäjä on saattanut syöttää verkkosivulle, kuten kirjautumistiedot, lomaketiedot jne. jatkokäsittelyä varten. Tietojen lähettäminen voidaan tehdä GET- tai POST-pyynnön kautta.

Otetaan esimerkki Angular-lomakkeen lähetyksestä nähdäksesi, kuinka lomakkeita lähetetään AngularJS:ssä.

AngularJS-lomakkeen lähetysesimerkissä aiomme esittää käyttäjälle tekstilaatikon, johon hän voi kirjoittaa aiheen, jonka hän haluaa oppia. Sivulle tulee lähetyspainike, jota painettaessa aihe lisätään järjestämättömälle listalle.

Alla oleva kuva tracjotka kulkevat tekstikenttään kirjoitetusta aiheesta Lähetä-painikkeen kautta sen alle liitettyyn luettelokohtaan.

AngularJS-lomake, jossa on aihetekstikenttä, Lähetä-painike ja tuloksena oleva järjestämätön aiheluettelo
Lomakkeen lähettäminen AngularJS:ssä ng-submitilla

Esimerkki AngularJS-lomakkeen lähetyksestä

Nyt näemme esimerkin AngularJS-lomakkeen lähettämisestä rekisterinpitäjältä ng-submit-ohjeen avulla:

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

  1. Ensin määrittelemme lomakkeen HTML-tagin, joka sisältää "tekstiruudun" ja "lähetä-painikkeen" ohjausobjektit, kuten Angularin lomakkeen lähetystapahtuman esimerkissä on esitetty. Sitten käytämme ng-submit AngularJS -direktiiviä sitoaksemme funktion "Display()" lomakkeeseen. Tämä funktio määritellään ohjaimessamme ja sitä kutsutaan, kun lomake lähetetään.
  2. Meillä on tekstiohjaus, johon käyttäjä kirjoittaa aiheen, jonka hän haluaa oppia. Tämä sidotaan muuttujaan nimeltä "Topic", jota käytetään ohjaimessamme.
  3. AngularJS:ssä on normaali lähetyspainike, jota käyttäjä napsauttaa, kun hän on kirjoittanut haluamansa aiheen.
  4. Olemme käyttäneet ng-toista -ohje, joka näyttää käyttäjän syöttämien aiheiden luettelokohteet. ng-repeat-käsky käy läpi jokaisen aiheen taulukossa "AllTopic" ja näyttää aiheen nimen vastaavasti.
  5. Ohjaimessamme deklaroimme taulukkomuuttujaa nimeltä 'AllTopic'. Tätä käytetään kaikkien käyttäjän vaiheessa 2 syöttämien aiheiden säilyttämiseen.
  6. Määrittelemme koodia Display()-funktiollemme, jota kutsutaan aina, kun käyttäjä napsauttaa Lähetä-painiketta. Täällä käytämme push array -toimintoa lisätäksemme aiheet, jotka käyttäjä on syöttänyt muuttujan "Topic" kautta taulukkoomme "AllTopic".

Jos AngularJS-lomakkeen esimerkkikoodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodisi selaimessa.
lähtö:

AngularJS ng-submit -esimerkin selaintuloste, jossa näkyy tyhjä aiheen tekstikenttä ja Lähetä-painike

Nähdäksesi koodin toimivan, kirjoita ensin aiheen nimi, kuten "Angular", kuten yllä näkyy tekstikentässä, ja napsauta sitten Lähetä-painiketta.

AngularJS ng-submit -tuloste Lähetä-painikkeen napsauttamisen jälkeen, ja syötetty aihe lisätään luetteloon

  • Kun lähetä-painiketta on napsautettu, näet tekstikenttään syötetyn kohteen lisättynä kohdeluetteloon.
  • Tämä saavutetaan Display()-funktiolla, jota kutsutaan, kun lähetyspainiketta painetaan.
  • Display()-funktio lisää tekstin taulukkomuuttujaan nimeltä "AllTopic". Ja ng-repeat -direktiivimme käy läpi jokaisen taulukon muuttujan 'AllTopic' arvon ja näyttää ne luettelokohteina vastaavasti.
Älä Miss:

ng-submit vs ng-click: kumpaa käyttää

molemmat AngularJS-direktiivit voivat kutsua samaa ohjainfunktiota, mutta ne kuuntelevat eri selaintapahtumia. ng-submit istuu <form> tagi ja reagoi submit-tapahtumaan, joten se käynnistyy myös, kun käyttäjä painaa Enter-näppäintä kentän sisällä. ng-click sijaitsee painikkeessa ja reagoi vain hiiren napsautukseen tai vastaavaan aktivointiin.

Aspect ng-submit ng-klikkaa
Isäntäelementti Lomakkeen tagi Mikä tahansa klikattava elementti
Tapahtuma kuunneltu lähetä, mukaan lukien Enter-näppäin vain klikkaus
Oletusselaimen POST Direktiivi estää Edelleen käynnistyy lähetyspainikkeesta
Lomakkeen tilan käyttöoikeus Lukee lomakkeen ohjaimesta $valid ja $invalid Ei omaa lomakekontekstia
Luonnollinen istuvuus Lomaketietojen luovuttaminen ohjaimelle Työkalupalkin painikkeet, linkit, modaaliset laukaisimet

Näppäimistötuki ratkaisee yleensä valinnan. Lomake, jossa on johdotus ng-click yksinään jättää Enter-näppäimen huomiotta, mikä turhauttaa käyttäjiä kirjautumiskentän täyttämisessä. ng-click toiminnoille, jotka eivät ole lomakkeen lähetyksiä, kuten kentän tyhjentämiselle tai valintaikkunan avaamiselle.

Miksi ng-submit estää oletusselaimen lähettämisen

Tavallinen HTML-lomake reagoi lähetystapahtumaan sarjoittamalla kenttiään ja pyytämällä selainta lataamaan uuden sivun, joka hylkää kaikki lomakkeessa olevat arvot. $scope. ng-submit direktiivi estää sitä tapahtumasta: se vaatii preventDefault() sinulle, jotta lauseke suoritetaan ja nykyinen sivu pysyy paikallaan. Ei $event argumenttia eikä manuaalista kutsua tarvita.

Vaimentamiseen liittyy yksi dokumentoitu ehto. ngLähetä viite, oletustoiminto estetään vain, kun lomakkeella ei ole action, data-action or x-action attribuutti. Lisää mikä tahansa näistä, niin selain navigoi normaalisti käsittelijän suoritettua toiminnon. Tämä on oikea toiminta asteittain parannetulle palvelimen renderöimälle lomakkeelle ja yllätys kaikkialla muualla.

Koska direktiivi nielee tapahtumaobjektin, lue lähetetyt arvot ominaisuuksista, jotka ng-malli kirjoitti laajuuteen tai välitti ne eksplisiittisesti, kuten ng-submit="Display(Topic)".

Lomakkeen validointi ennen ng-submit-ajoa

Yllä oleva esimerkki hyväksyy tyhjän aiheen, koska mikään ei tarkista tekstiruutua ensin. AngularJS rakentaa lomakeohjaimen jokaiselle nimetylle lomakkeelle, ja tämä ohjain näyttää tarvittavat liput lähetyksen portoimiseksi. Lisää novalidate joten selain jättää omat HTML5-kuplansa pois päältä ja AngularJS:n lomakkeen validointi Ottaa haltuun.

  1. Anna lomakkeelle nameAngularJS julkaisee kyseisen nimisen ohjaimen ympäröivällä ohjain laajuus.
  2. Lisää novalidate lomaketagiin, jotta selaimen natiivivahvistus pysyy poissa tieltä.
  3. Merkitse kentät käyttämällä required, ng-minlength, ng-maxlength or ng-pattern.
  4. Suojaa ohjaajaa $validja välitä lomakeohjain, jotta funktio voi tarkastaa yksittäisiä kenttiä.
  5. Poista painike käytöstä ng-disabled osoittaen $invalid, joka antaa välitöntä visuaalista palautetta.
<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>

Kaksi virhettä selittävät useimpia raportoituja ongelmia tässä mallissa:

  • Double jättämisestä. Sitova ng-click lähetä-painikkeen kohdalla samalla kun ng-submit istuu lomakkeella ja suorittaa käsittelijän kahdesti, kerran tapahtumaa kohden. Virallinen viite varoittaa kahden käsittelijän yhdistämisestä, joten valitse toinen.
  • Odottamattomat lähetykset. Mikä tahansa lomakkeen sisällä oleva painike ilman type="button" laukaisee submit-tapahtuman. Merkitse cancel- ja reset-painikkeet erikseen, muuten ne käynnistävät myös käsittelijän.

Vartiointi päällä $valid on mukavuussyistä, ei turvallisuussyistä. Arvot on silti validoitava uudelleen palvelimella ennen niiden tallentamista.

UKK

Kyllä. Lomake, jossa on submit-tyyppinen syöte tai painike, aiheuttaa submit-tapahtuman, kun kentän sisällä painetaan Enter-näppäintä, joten ng-submit-lauseke suoritetaan ilman ylimääräistä avaimenkäsittelijää.

Ei. Vain lomake-elementit käynnistävät submit-tapahtuman, jota direktiivi kuuntelee. Siirrä ng-submit form-tagin päälle tai liitä ng-click elementtiin, johon haluat reagoida.

ng-submit ei anna argumentteja. Lue ng-modelin täyttämät laajuusominaisuudet tai anna ne eksplisiittisesti, esimerkiksi ng-submit=”Display(Topic)” tai ng-submit=”Display(topicForm)”.

Kyllä. Jokaisella lomake-elementillä on oma lomake-ohjain, joten anna jokaiselle lomakkeelle yksilöllinen nimi ja sido se erilliseen käsittelijään. Yhden funktion jakaminen lomakkeiden välillä aiheuttaa laajuustörmäyksiä.

Ohjaaja ampuu kumpaan suuntaan tahansa, mutta kenttä ilman ng-malli ei koskaan kirjoita arvoaan $scope-muuttujaan, joten funktio ei voi lukea sitä. Sido jokainen syöte, jota aiot käsitellä.

Käännä lomake testissä, aseta mallin arvo laajuusfunktiolle, käynnistä submit-tapahtuma ja suorita sitten assert käsittelijän tuottamassa taulukossa tai palvelukutsussa. Karma ja Jasmine ovat edelleen tavanomainen yhdistelmä.

Kielimallit lukevat mallin muodon ja vaaditun luonnoksen, ng-pattern- ja ng-minlength-attribuutit sekä vastaavat viestit, mikä tekee AngularJS:stä paljon tehokkaamman. lomakkeen validointi työstää arviointivaiheeseen.

GitHub Copilot Agenttitila kirjoittaa mallipohjan uudelleen (ngSubmit)-muotoon FormGroup-funktiolla ja luo komponenttiluokan, mutta luodut validointityökalut ja asynkroniset kutsut vaativat silti ihmisen tarkistuksen ja testauksen.

Tiivistä tämä viesti seuraavasti: