ng-submit în AngularJS: Gestionarea trimiterii formularului cu exemplu

prin: James Hartman James Hartman
Hours Actualizat

⚡ Rezumat inteligent

Funcția ng-submit din AngularJS leagă o funcție de controler la evenimentul de trimitere al unui formular din browser, astfel încât valorile introduse sunt procesate în interiorul controlerului, iar pagina nu se reîncarcă niciodată printr-un POST implicit.

  • 🔘 Rol directiv: ng-submit leagă o expresie AngularJS de evenimentul de tip submit al unui element de formular.
  • ☑️ Fără reîncărcare a paginii: Comenzile POST implicite ale browserului sunt suprimate, cu excepția cazului în care formularul conține un atribut de acțiune.
  • ✅ Exemplu lucrat: O casetă de text plus Display() împinge fiecare subiect în matricea AllTopic pentru ng-repeat.
  • 🧪 Poartă de validare: Asocierea $valid cu novalidate și ng-disabled blochează trimiterea datelor incomplete.
  • 🛠️ Greseala comuna: Apăsarea ng-clic pe butonul de trimitere de lângă ng-submit duce la o trimitere dublă.
  • 📊 Notă privind versiunea: Suportul AngularJS s-a încheiat în ianuarie 2022; versiunea modernă Angular trimite fișiere prin (ngSubmit).
Citește mai mult

Directiva ng-submit în AngularJS care leagă un eveniment de trimitere a unui formular la o funcție a controlerului

Directiva AngularJS ng-submit

ng-submit directiva din AngularJS este folosită pentru a lega aplicația la evenimentul de trimitere al browserului. Deci în cazul AngularJS la evenimentul de trimitere, puteți efectua o anumită prelucrare în cadrul controlorului însuși și apoi puteți afișa informațiile prelucrate utilizatorului.

Notă privind versiunea: AngularJS 1.x a părăsit perioada de suport pe termen lung pe 31 decembrie 2021, iar echipa de framework confirmă acest lucru. Suportul AngularJS s-a încheiat oficial în ianuarie 2022, deci nu urmează versiuni sau patch-uri de securitate. Fiecare pas și bloc de cod de mai jos este păstrat exact așa cum este scris, ca referință istorică. Lucrările noi aparțin Angular-ului modern, care exprimă aceeași idee ca și (ngSubmit) legat de un FormGroup.

Cum să trimiteți un formular în AngularJS folosind ng-submit

Procesele de trimitere a informațiilor pe o pagină web sunt în mod normal gestionate de evenimentul de trimitere din browserul web. Acest eveniment este utilizat în mod normal pentru a trimite informații pe care utilizatorul le-ar fi putut introduce pe o pagină web către server pentru procesare ulterioară, cum ar fi acreditările de conectare, datele din formular etc. Trimiterea informațiilor se poate face prin cererea GET sau POST.

Să luăm un exemplu de trimitere a formularelor Angular pentru a vedea cum să trimiteți formulare în AngularJS.

În exemplul nostru de trimitere a formularului AngularJS, vom prezenta utilizatorului o casetă de text în care acesta poate introduce subiectul pe care vrea să îl învețe. Pe pagină va exista un buton de trimitere, care, atunci când este apăsat, va adăuga subiectul într-o listă neordonată.

Ilustrația de mai jos traccare curg, de la subiectul tastat în caseta de text, prin butonul Trimite, până la elementul din listă adăugat dedesubt.

Formular AngularJS cu o casetă de text pentru subiect, un buton Trimitere și lista de subiecte neordonată rezultată
Trimiterea unui formular în AngularJS folosind ng-submit

Exemplu de trimitere formular AngularJS

Acum, vom vedea un exemplu de trimitere a formularului AngularJS de la Controller folosind directiva 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 Explicaţie:

  1. Mai întâi declarăm eticheta HTML a formularului nostru, care va conține controlul „casetă text” și „buton de trimitere”, așa cum se arată în exemplul de eveniment de trimitere a formularului Angular. Apoi folosim directiva ng-submit AngularJS pentru a lega funcția „Display()” la formularul nostru. Această funcție va fi definită în controlerul nostru și va fi apelată la trimiterea formularului.
  2. Avem un control text în care utilizatorul va introduce subiectul pe care vrea să-l învețe. Aceasta va fi legată de o variabilă numită „Subiect” care va fi folosită în controlerul nostru.
  3. Există butonul normal de trimitere în AngularJS pe care utilizatorul îl va face clic când a intrat în subiectul dorit.
  4. Am folosit ng-repetă directivă pentru a afișa elementele din listă cu subiectele introduse de utilizator. Directiva ng-repeat trece prin fiecare subiect din matricea „AllTopic” și afișează numele subiectului în consecință.
  5. În controlerul nostru, declarăm o variabilă de tip matrice numită „AllTopic”. Aceasta va fi utilizată pentru a conține toate subiectele introduse de utilizator în Pasul 2.
  6. Definim codul pentru funcția noastră Display(), care va fi apelat ori de câte ori utilizatorul face clic pe butonul Trimitere. Aici folosim funcția push array pentru a adăuga subiectele introduse de utilizator prin variabila „Subiect” în tabloul nostru „AllTopic”.

Dacă exemplul de cod de formular AngularJS este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:

Rezultatul browserului pentru exemplul AngularJS ng-submit care arată caseta de text goală a subiectului și butonul Trimite

Pentru a vedea codul funcționează, mai întâi, introduceți un nume de subiect precum „Angular”, așa cum se arată mai sus în caseta de text, apoi faceți clic pe butonul Trimitere.

Rezultatul AngularJS ng-submit după ce se dă clic pe Trimitere, cu subiectul introdus adăugat la listă

  • După ce se face clic pe butonul de trimitere, veți vedea articolul care a fost introdus în caseta de text adăugat la lista de articole.
  • Acest lucru este realizat de funcția Display(), care este apelată atunci când este apăsat butonul de trimitere.
  • Funcția Display() adaugă textul la variabila matrice numită „AllTopic”. Și directiva noastră ng-repeat trece prin fiecare valoare din variabila matrice „AllTopic” și le afișează ca elemente de listă în consecință.

ARTICOLE SIMILARE

ng-submit vs ng-click: care să folosești

Ambele Directivele AngularJS pot apela aceeași funcție a controlerului, dar ascultă evenimente diferite ale browserului. ng-submit stă pe <form> etichetă și reacționează la evenimentul de trimitere, deci se declanșează și atunci când un utilizator apasă Enter în interiorul unui câmp. ng-click se află pe un buton și reacționează doar la un clic de mouse sau o activare echivalentă.

Aspect ng-submit ng-clic
Element gazdă Eticheta formularului Orice element pe care se poate face clic
Eveniment ascultat trimite, inclusiv tasta Enter doar clic
POST implicit al browserului Suprimat de directivă Încă se declanșează de la un buton de trimitere
Acces la starea formularului Citește $valid și $invalid pe controlerul de formular Fără context de formă propriu
Potrivire naturală Predarea datelor din formular către un controler Butoane din bara de instrumente, linkuri, declanșatoare modale

Suportul pentru tastatură decide de obicei alegerea. Un formular conectat cu ng-click ignoră tasta Enter, ceea ce îi frustrează pe utilizatori care completează o casetă de conectare. Reserve ng-click pentru acțiuni care nu sunt trimiteri de formulare, cum ar fi ștergerea unui câmp sau deschiderea unei casete de dialog.

De ce ng-submit împiedică trimiterea implicită a browserului

Un formular HTML simplu reacționează la un eveniment de trimitere prin serializarea câmpurilor sale și solicitarea browserului să încarce o pagină nouă, care elimină fiecare valoare conținută în $scope. ng-submit directiva împiedică acest lucru: apelează preventDefault() pentru tine, deci expresia rulează și pagina curentă rămâne pe loc. Nu $event argument și nu este necesar niciun apel manual.

Suprimarea are o condiție documentată. Conform Trimiteți referința, acțiunea implicită este împiedicată doar atâta timp cât formularul nu conține action, data-action or x-action atribut. Adăugați oricare dintre acestea și browserul navighează ca de obicei după ce handler-ul termină, ceea ce este comportamentul corect pentru un formular randat de server îmbunătățit progresiv și o surpriză în orice alt loc.

Deoarece directiva înghite obiectul evenimentului, citește valorile trimise din proprietățile care ng-model a scris în domeniul de aplicare sau le-a transmis explicit, ca în ng-submit="Display(Topic)".

Cum se validează un formular înainte de rularea ng-submit

Exemplul de mai sus acceptă un subiect gol, deoarece nimic nu verifică mai întâi caseta de text. AngularJS construiește un controler de formular pentru fiecare formular denumit, iar acel controler expune semnalizatoarele necesare pentru a controla trimiterea formularului. Adaugă novalidate deci browserul își lasă propriile bulele HTML5 dezactivate și AngularJS validarea formularului preia.

  1. Dați formularului o nameAngularJS publică un controler cu acel nume pe serverul înconjurător. controlor scop.
  2. Adăuga novalidate la eticheta formularului, astfel încât validarea nativă a browserului să nu stea în cale.
  3. Marcați câmpurile folosind required, ng-minlength, ng-maxlength or ng-pattern.
  4. Protejați conducătorul cu $validși transmiteți controlerul de formular astfel încât funcția să poată inspecta câmpuri individuale.
  5. Dezactivați butonul cu ng-disabled arătând spre $invalid, care oferă feedback vizual imediat.
<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>

Două greșeli explică cele mai multe probleme raportate cu acest model:

  • Double depunere. Obligatoriu ng-click pe butonul de trimitere în timp ce ng-submit se află pe formular și rulează handler-ul de două ori, o dată per eveniment. Referința oficială avertizează împotriva combinării celor două handlere, așa că alegeți unul.
  • Trimiteri neașteptate. Orice buton din interiorul unui formular fără type="button" declanșează evenimentul de trimitere. Marcați explicit butoanele de anulare și resetare, altfel acestea declanșează și handler-ul.

Păzind pe $valid este o comoditate, nu un control de securitate. Valorile trebuie totuși revalidate pe server înainte de a fi stocate.

Întrebări frecvente

Da. Un formular care conține o intrare sau un buton de tip submit generează evenimentul submit atunci când se apasă Enter în interiorul unui câmp, astfel încât expresia ng-submit rulează fără niciun handler de cheie suplimentar.

Nu. Doar elementele formularului generează evenimentul submit pe care directiva îl ascultă. Mută ​​ng-submit pe eticheta formularului sau atașează ng-click elementului la care vrei să reacționezi.

`ng-submit` nu transmite argumente. Citește proprietățile de domeniu pe care le-a populat `ng-model` sau transmite-le explicit, de exemplu `ng-submit=”Display(Topic)” sau `ng-submit=”Display(topicForm)”.

Da. Fiecare element de formular primește propriul controler de formular, așa că dați fiecărui formular un nume unic și legați un handler separat. Partajarea unei funcții între formulare invită la coliziuni de domeniu.

Conducătorul trage în ambele direcții, dar un câmp fără ng-model nu își scrie niciodată valoarea în $scope, deci funcția nu o poate citi. Legați fiecare intrare pe care intenționați să o procesați.

Compilează formularul într-un test, setează valoarea modelului pe domeniul de aplicare, declanșează un eveniment de tip submit, apoi execută o afirmație asupra matricei sau apelului de serviciu produs de handler. Karma cu Jasmine rămâne asocierea obișnuită.

Modelele de limbaj citesc forma modelului și specificațiile necesare, atributele ng-pattern și ng-minlength plus mesajele corespunzătoare, ceea ce transformă mult AngularJS în versiunea preliminară. validarea formularului să lucreze la o etapă de revizuire.

Copilotul GitHub Modul agent rescrie un șablon în (ngSubmit) cu FormGroup și schelează clasa componentelor, însă validatorii generați și apelurile asincrone necesită în continuare revizuire și teste umane.

Rezumați această postare cu: