ng-submit u AngularJS-u: Obrada slanja obrasca s primjerom

By: James Hartman James Hartman
Hours Aลพurirano

โšก Pametni saลพetak

ng-submit u AngularJS-u veลพe funkciju kontrolera na dogaฤ‘aj slanja obrasca u pregledniku, tako da se unesene vrijednosti obraฤ‘uju unutar kontrolera i stranica se nikada ne ponovno uฤitava putem zadanog POST-a.

  • ๐Ÿ”˜ Uloga direktive: ng-submit veลพe AngularJS izraz na dogaฤ‘aj slanja (submit) elementa obrasca.
  • โ˜‘๏ธ Nema ponovnog ponovljenog pohranjivanja stranice: Zadani POST preglednika je potisnut osim ako obrazac ne sadrลพi atribut akcije.
  • โœ… Obraฤ‘eni primjer: Okvir za tekst i Display() guraju svaku temu u niz AllTopic za ng-repeat.
  • ๐Ÿงช Validacijski prolaz: Spajanje $valid s novalidate i ng-disabled blokira slanje nepotpunih podataka.
  • ๐Ÿ› ๏ธ Uobiฤajena pogreลกka: Vezivanje ng-klika na gumb za slanje pored ng-submit uzrokuje dvostruko slanje.
  • ๐Ÿ“Š Napomena o verziji: Podrลกka za AngularJS zavrลกila je u sijeฤnju 2022.; moderni Angular ลกalje podatke putem (ngSubmit).
Proฤitaj viลกe

ng-submit direktiva u AngularJS-u koja veลพe dogaฤ‘aj slanja obrasca na funkciju kontrolera

AngularJS ng-submit Direktiva

The ng-podnesi direktiva u AngularJS-u koristi se za vezanje aplikacije na dogaฤ‘aj slanja u pregledniku. Dakle, u sluฤaju AngularJS na dogaฤ‘aju slanja, moลพete izvrลกiti neku obradu unutar samog kontrolera i zatim prikazati obraฤ‘ene informacije korisniku.

Napomena o verziji: AngularJS 1.x je prestao biti dostupan za dugoroฤnu podrลกku 31. prosinca 2021., a tim za framework potvrฤ‘uje da Podrลกka za AngularJS je sluลพbeno zavrลกena u sijeฤnju 2022., tako da ne slijede nikakva izdanja ili sigurnosne zakrpe. Svaki korak i blok koda u nastavku ฤuva se toฤno onako kako je napisan, kao povijesna referenca. Novi rad pripada modernom Angularu, koji izraลพava istu ideju kao (ngSubmit) vezan na FormGroup.

Kako poslati obrazac u AngularJS koristeฤ‡i ng-submit

Procesima podnoลกenja informacija na web stranici obiฤno upravlja dogaฤ‘aj podnoลกenja u web pregledniku. Ovaj se dogaฤ‘aj obiฤno koristi za slanje informacija koje je korisnik moลพda unio na web-stranici na posluลพitelj za daljnju obradu kao ลกto su vjerodajnice za prijavu, podaci obrasca itd. Podnoลกenje informacija moลพe se izvrลกiti putem GET ili POST zahtjeva.

Uzmimo primjer slanja obrazaca u Angularu da vidimo kako poslati obrasce u AngularJS.

U naลกem primjeru slanja obrasca AngularJS, korisniku ฤ‡emo predstaviti tekstni okvir u koji mogu unijeti temu koju ลพele uฤiti. Na stranici ฤ‡e se nalaziti gumb za slanje, koji ฤ‡e kada se pritisne dodati temu na neureฤ‘eni popis.

Ilustracija ispod trackoji teku, od teme upisane u tekstni okvir, preko gumba Poลกalji, do stavke popisa dodane ispod.

AngularJS obrazac s okvirom za tekst teme, gumbom Poลกalji i rezultirajuฤ‡im neureฤ‘enim popisom tema
Slanje obrasca u AngularJS pomoฤ‡u ng-submit

Primjer slanja AngularJS obrasca

Sada ฤ‡emo vidjeti primjer podnoลกenja obrasca AngularJS iz kontrolera pomoฤ‡u direktive 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 Objaลกnjenje:

  1. Prvo deklariramo HTML oznaku obrasca koja ฤ‡e sadrลพavati kontrole "okvir za tekst" i "gumb za slanje" kao ลกto je prikazano u primjeru dogaฤ‘aja slanja obrasca Angular. Zatim koristimo AngularJS direktivu ng-submit za povezivanje funkcije "Display()" s naลกim obrascem. Ova funkcija bit ฤ‡e definirana u naลกem kontroleru i bit ฤ‡e pozvana kada se obrazac poลกalje.
  2. Imamo tekstualnu kontrolu u koju ฤ‡e korisnik unijeti temu koju ลพeli nauฤiti. Ovo ฤ‡e biti vezano uz varijablu pod nazivom 'Topic' koja ฤ‡e se koristiti u naลกem kontroleru.
  3. Postoji uobiฤajeni gumb za slanje u AngularJS-u koji ฤ‡e korisnik kliknuti kada unese temu koju ลพeli.
  4. Koristili smo ng-ponovi direktiva za prikaz stavki popisa tema koje korisnik unese. Direktiva ng-repeat prolazi kroz svaku temu u nizu 'AllTopic' i prikazuje naziv teme u skladu s tim.
  5. U naลกem kontroleru deklariramo varijablu polja pod nazivom 'AllTopic'. Ona ฤ‡e se koristiti za pohranjivanje svih tema koje je korisnik unio u 2. koraku.
  6. Definiramo kod za naลกu Display() funkciju koja ฤ‡e biti pozvana kad god korisnik klikne gumb Poลกalji. Ovdje koristimo funkciju push array za dodavanje tema koje je korisnik unio putem varijable 'Topic' u naลก niz 'AllTopic'.

Ako se primjer koda obrasca AngularJS uspjeลกno izvrลกi, sljedeฤ‡i ฤ‡e se izlaz prikazati kada pokrenete svoj kod u pregledniku.
Izlaz:

Izlaz preglednika za primjer AngularJS ng-submit koji prikazuje prazan tekstualni okvir teme i gumb Poลกalji

Da biste vidjeli da kod radi, prvo unesite naziv teme kao ลกto je "Angular" kao ลกto je prikazano gore u tekstualni okvir, a zatim kliknite na gumb Poลกalji.

AngularJS ng-submit izlaz nakon klika na Poลกalji, s unesenom temom dodanom na popis

  • Nakon ลกto se klikne gumb za slanje, vidjet ฤ‡ete da je stavka koja je unesena u tekstualni okvir dodana na popis stavki.
  • To se postiลพe funkcijom Display(), koja se poziva kada se pritisne gumb za slanje.
  • Funkcija Display() dodaje tekst u varijablu polja pod nazivom 'AllTopic'. A naลกa direktiva ng-repeat prolazi kroz svaku vrijednost u varijabli polja 'AllTopic' i prikazuje ih kao stavke popisa u skladu s tim.

POVEZANI ฤŒLANCI

ng-submit vs ng-click: koji koristiti

Oboje AngularJS direktive mogu pozvati istu funkciju kontrolera, ali ipak osluลกkuju razliฤite dogaฤ‘aje preglednika. ng-submit sjedi na <form> oznaku i reagira na dogaฤ‘aj slanja, pa se takoฤ‘er aktivira kada korisnik pritisne Enter unutar polja. ng-click nalazi se na gumbu i reagira samo na klik miลกa ili ekvivalentnu aktivaciju.

Aspekt ng-podnesi ng-klik
Domaฤ‡inski element Oznaka obrasca Bilo koji element na koji se moลพe kliknuti
Dogaฤ‘aj je posluลกan poslati, ukljuฤujuฤ‡i tipku Enter samo klik
Zadani preglednik POST Potisnuto direktivom I dalje se aktivira s gumba za slanje
Pristup stanju obrasca ฤŒita $valid i $invalid na kontroleru forme Nema vlastiti kontekst forme
Prirodno pristajanje Predavanje podataka obrasca kontroleru Gumbi alatne trake, poveznice, modalni okidaฤi

Podrลกka za tipkovnicu obiฤno odluฤuje o izboru. Obrazac povezan s ng-click samo ignorira tipku Enter, ลกto frustrira korisnike pri popunjavanju okvira za prijavu. Rezerviraj ng-click za radnje koje nisu slanje obrasca, kao ลกto su brisanje polja ili otvaranje dijaloga.

Zaลกto ng-submit sprjeฤava slanje putem zadanog preglednika

Obiฤan HTML obrazac reagira na dogaฤ‘aj slanja serijaliziranjem svojih polja i traลพenjem od preglednika da uฤita novu stranicu, ลกto odbacuje svaku vrijednost koja se nalazi u $scope, ng-submit Direktiva sprjeฤava da se to dogodi: poziva preventDefault() za vas, tako da se izraz izvrลกava, a trenutna stranica ostaje na mjestu. Ne $event argument i nije potreban ruฤni poziv.

Potiskivanje ima jedan dokumentirani uvjet. Prema ngSubmit referenca, zadana radnja se sprjeฤava samo dok obrazac ne sadrลพi action, data-action or x-action atribut. Dodajte bilo koji od njih i preglednik ฤ‡e se nakon zavrลกetka obrade navigacijom ponaลกati kao i obiฤno, ลกto je ispravno ponaลกanje za progresivno poboljลกani obrazac prikazan od strane posluลพitelja i iznenaฤ‘enje svugdje drugdje.

Buduฤ‡i da direktiva proguta objekt dogaฤ‘aja, proฤitajte poslane vrijednosti iz svojstava koja ng-model pisali u opseg ili ih eksplicitno prosljeฤ‘ivali, kao u ng-submit="Display(Topic)".

Kako validirati obrazac prije pokretanja ng-submit naredbe

Gornji primjer prihvaฤ‡a praznu temu jer niลกta prvo ne provjerava tekstualni okvir. AngularJS gradi kontroler obrasca za svaki imenovani obrazac, a taj kontroler otkriva zastavice potrebne za slanje. Dodaj novalidate pa preglednik iskljuฤuje vlastite HTML5 mjehuriฤ‡e i AngularJS validacija obrasca preuzima.

  1. Dajte obrazac nameAngularJS objavljuje kontroler tog imena na okolnom kontrolor opseg.
  2. dodati novalidate u oznaku obrasca kako bi se izvorna validacija preglednika izbjegla.
  3. Oznaฤite polja pomoฤ‡u required, ng-minlength, ng-maxlength or ng-pattern.
  4. ฤŒuvajte vodiฤa s $validi proslijedite kontroler obrasca kako bi funkcija mogla pregledati pojedinaฤna polja.
  5. Onemoguฤ‡ite gumb pomoฤ‡u ng-disabled pokazujuฤ‡i na $invalid, ลกto daje trenutnu vizualnu povratnu informaciju.
<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>

Dvije pogreลกke objaลกnjavaju veฤ‡inu prijavljenih problema s ovim uzorkom:

  • Double podnoลกenje. Vezivanje ng-click na gumbu za slanje dok ng-submit sjedi na obrascu pokreฤ‡e rukovatelj dva puta, jednom po dogaฤ‘aju. Sluลพbena referenca upozorava na kombiniranje dvaju rukovatelja, stoga odaberite jedan.
  • Neoฤekivane prijave. Bilo koji gumb unutar obrasca bez type="button" pokreฤ‡e dogaฤ‘aj slanja. Izriฤito oznaฤi gumbe za otkazivanje i resetiranje, inaฤe i oni aktiviraju dogaฤ‘aj za obradu.

ฤŒuvanje na $valid je pogodnost, a ne sigurnosna kontrola. Vrijednosti se i dalje moraju ponovno validirati na posluลพitelju prije pohrane.

Pitanja i odgovori

Da. Obrazac koji sadrลพi unos ili gumb tipa submit pokreฤ‡e dogaฤ‘aj slanja kada se pritisne Enter unutar polja, tako da se izraz ng-submit izvrลกava bez ikakvog dodatnog rukovatelja tipkama.

Ne. Samo elementi obrasca pokreฤ‡u dogaฤ‘aj slanja koji direktiva osluลกkuje. Premjestite ng-submit na oznaku obrasca ili priloลพite ng-click elementu na koji zapravo ลพelite reagirati.

ng-submit ne prosljeฤ‘uje argumente. Proฤitajte svojstva opsega koja je ng-model popunio ili ih eksplicitno proslijedite, na primjer ng-submit=โ€Display(Topic)โ€ ili ng-submit=โ€Display(topicForm)โ€.

Da. Svaki element obrasca dobiva vlastiti kontroler obrasca, stoga svakom obrascu dajte jedinstveno ime i veลพite zaseban rukovatelj. Dijeljenje jedne funkcije izmeฤ‘u obrazaca dovodi do kolizija opsega.

Rukovatelj aktivira u oba smjera, ali polje bez ng-model nikad ne zapisuje svoju vrijednost u $scope, tako da je funkcija ne moลพe proฤitati. Poveลพite svaki ulaz koji planirate obraditi.

Kompajlirajte obrazac u testu, postavite vrijednost modela na opseg, pokrenite dogaฤ‘aj slanja, a zatim potvrdite (assert) na nizu ili pozivu usluge koji generira rukovatelj. Karma s Jasmine ostaje uobiฤajeno uparivanje.

Jeziฤni modeli ฤitaju potreban oblik modela i nacrt, atribute ng-pattern i ng-minlength plus odgovarajuฤ‡e poruke, ลกto AngularJS ฤini mnogo jednostavnijim. validacija obrasca preฤ‡i u korak pregleda.

GitHub kopilot Agentski naฤin rada prepisuje predloลพak u (ngSubmit) s FormGroup i scaffolira klasu komponente, no generirani validatori i asinkroni pozivi i dalje zahtijevaju ljudski pregled i testiranje.

Saลพmite ovu objavu uz: