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

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.

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:

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.

• 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.

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.

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