ng-submit in AngularJS: Gestione dell'invio di moduli con esempio

Direttiva ng-submit di AngularJS

Migliori ng-invia La direttiva in AngularJS viene utilizzata per associare l'applicazione all'evento di invio del browser. Quindi nel caso di AngularJS sull'evento di invio, è possibile eseguire alcune elaborazioni all'interno del titolare del trattamento stesso e quindi visualizzare le informazioni elaborate all'utente.

Nota sulla versione: AngularJS 1.x ha lasciato il supporto a lungo termine il 31 dicembre 2021 e il team del framework conferma che Il supporto per AngularJS è ufficialmente terminato. nel gennaio 2022, quindi non seguono rilasci o patch di sicurezza. Ogni passaggio e blocco di codice qui sotto è mantenuto esattamente come scritto, come riferimento storico. Il nuovo lavoro appartiene al moderno Angular, che esprime la stessa idea di (ngSubmit) associato a un FormGroup.

Come inviare un modulo in AngularJS utilizzando ng-submit

I processi di invio delle informazioni su una pagina Web sono normalmente gestiti dall'evento di invio nel browser Web. Questo evento viene normalmente utilizzato per inviare informazioni che l'utente potrebbe aver inserito in una pagina Web al server per un'ulteriore elaborazione come credenziali di accesso, dati del modulo, ecc. L'invio di informazioni può essere effettuato tramite richiesta GET o POST.

Prendiamo un esempio di invio di moduli Angular per vedere come inviare moduli in AngularJS.

Nel nostro esempio di invio del form AngularJS, presenteremo una casella di testo all'utente in cui può inserire l'argomento che desidera apprendere. Ci sarà un pulsante di invio sulla pagina, che quando premuto aggiungerà l'argomento a un elenco non ordinato.

L'illustrazione qui sotto traces che fluiscono, dall'argomento digitato nella casella di testo, attraverso il pulsante Invia, fino all'elemento dell'elenco aggiunto di seguito.

Esempio di invio del modulo AngularJS

Ora vedremo un esempio di invio di moduli AngularJS dal Controller utilizzando la direttiva 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 Spiegazione:

1. Innanzitutto, dichiariamo il tag HTML del nostro modulo, che conterrà la casella di testo e il pulsante di invio, come mostrato nell'esempio dell'evento di invio del modulo Angular. Successivamente, utilizziamo la direttiva AngularJS ng-submit per associare la funzione "Display()" al nostro modulo. Questa funzione verrà definita nel nostro controller e verrà richiamata quando il modulo viene inviato.
2. Abbiamo un controllo di testo in cui l'utente inserirà l'argomento che desidera imparare. Questo sarà associato a una variabile chiamata "Topic" che verrà utilizzata nel nostro controller.
3. C'è il normale pulsante di invio in AngularJS su cui l'utente farà clic quando avrà inserito l'argomento desiderato.
4. Abbiamo usato il ng-ripetere direttiva per visualizzare le voci dell'elenco degli argomenti immessi dall'utente. La direttiva ng-repeat attraversa ciascun argomento nell'array "AllTopic" e visualizza il nome dell'argomento di conseguenza.
5. Nel nostro controller, dichiariamo una variabile array chiamata 'AllTopic'. Questa verrà utilizzata per contenere tutti gli argomenti inseriti dall'utente nel passaggio 2.
6. Stiamo definendo il codice per la nostra funzione Display() che verrà chiamata ogni volta che l'utente fa clic sul pulsante Invia. Qui stiamo utilizzando la funzione push array per aggiungere gli argomenti immessi dall'utente tramite la variabile "Topic" nel nostro array "AllTopic".

Se il codice di esempio del form AngularJS viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:

Per vedere il codice funzionare, per prima cosa inserisci un nome di argomento come "Angular" come mostrato sopra nella casella di testo e poi fai clic sul pulsante Invia.

• Dopo aver cliccato sul pulsante Invia, vedrai l'elemento inserito nella casella di testo aggiunto all'elenco degli elementi.
• Ciò viene ottenuto dalla funzione Display(), che viene chiamata quando viene premuto il pulsante di invio.
• La funzione Display() aggiunge il testo alla variabile dell'array denominata "AllTopic". E la nostra direttiva ng-repeat esamina ogni valore nella variabile dell'array "AllTopic" e li visualizza di conseguenza come elementi dell'elenco.

ng-submit vs ng-click: quale usare

Entrambi i progetti editoriali di Direttive AngularJS possono richiamare la stessa funzione del controller, eppure sono in ascolto di eventi del browser diversi. ng-submit si siede sul <form> Il tag reagisce all'evento di invio, quindi si attiva anche quando un utente preme Invio all'interno di un campo. ng-click Si posiziona su un pulsante e reagisce solo al clic del mouse o a un'attivazione equivalente.

Il supporto della tastiera di solito risolve la scelta. Un modulo cablato con ng-click da solo ignora il tasto Invio, il che frustra gli utenti che compilano un campo di accesso. Riserva ng-click per azioni che non consistono nell'invio di moduli, come la cancellazione di un campo o l'apertura di una finestra di dialogo.

Perché ng-submit impedisce l'invio predefinito del browser

Un semplice modulo HTML reagisce a un evento di invio serializzando i suoi campi e chiedendo al browser di caricare una nuova pagina, che scarta ogni valore contenuto in $scope. ng-submit la direttiva impedisce che ciò accada: chiama preventDefault() per te, quindi l'espressione viene eseguita e la pagina corrente rimane al suo posto. No $event Non è richiesto alcun argomento né alcuna chiamata manuale.

La soppressione ha una condizione documentata. Secondo il Riferimento a ngSubmit, l'azione predefinita viene impedita solo quando il modulo non contiene action, data-action or x-action attributo. Aggiungendone uno qualsiasi, il browser naviga normalmente al termine dell'esecuzione del gestore, che è il comportamento corretto per un modulo renderizzato lato server con avanzamento progressivo e una sorpresa in tutti gli altri casi.

Poiché la direttiva inghiotte l'oggetto evento, legge i valori inviati dalle proprietà che modello ng scritto sull'ambito, o passarli esplicitamente, come in ng-submit="Display(Topic)".

Come convalidare un modulo prima dell'esecuzione di ng-submit

L'esempio sopra accetta un argomento vuoto, perché nulla controlla prima la casella di testo. AngularJS crea un controller del modulo per ogni modulo denominato e tale controller espone i flag necessari per controllare l'invio. Aggiungi novalidate quindi il browser lascia disattivate le proprie bolle HTML5 e AngularJS convalida del modulo prende il sopravvento.

1. Dare al modulo un name. AngularJS pubblica un controller con quel nome nell'ambiente circostante controllore scopo.
2. Aggiungi novalidate al tag form in modo che la convalida nativa del browser non interferisca.
3. Contrassegna i campi, utilizzando required, ng-minlength, ng-maxlength or ng-pattern.
4. Proteggere il gestore con $valide passa il controller del modulo in modo che la funzione possa ispezionare i singoli campi.
5. Disabilita il pulsante con ng-disabled indicando $invalid, che fornisce un feedback visivo immediato.

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

La maggior parte dei problemi segnalati con questo schema sono dovuti a due errori:

• Double sottomissione. Rilegatura ng-click sul pulsante di invio mentre ng-submit Il modulo esegue il gestore due volte, una per ogni evento. La documentazione ufficiale sconsiglia di combinare i due gestori, quindi sceglietene uno.
• Invii inattesi. Qualsiasi pulsante all'interno di un modulo senza type="button" Genera l'evento di invio. Contrassegna esplicitamente i pulsanti Annulla e Reimposta, altrimenti attivano anche il gestore eventi.

Guardia su $valid Si tratta di una comodità, non di un controllo di sicurezza. I valori devono comunque essere convalidati nuovamente sul server prima di essere memorizzati.

DOMANDE FREQUENTI