creareapp angularI Moduli Web in Angular 7

In questo tutorial vedremo come recuperare i valori inseriti nei classici campi di un modulo web, partendo dal campo input, sottolineando le direttive Angular da usare per fa funzionare il tutto all'interno di un componente.

Ultimo aggiornamento: 6 giorni fa

Dare la possibilità all'utente di inserire delle informazioni da memorizzare su un database locale o remoto tramite l'interfaccia di un'app e il classico form o modulo, è una delle operazioni che dovrai compiere più frequentemente durante lo sviluppo di una qualsiasi applicazione.

Vediamo allora come si possa progettare un semplice modulo con un campo input, e come si possa recuperare l'informazione inserita, usufruendo delle informazioni già in nostro possesso, quando abbiamo parlato di gestori di evento.

Recuperare il dato da un campo INPUT

In questo caso il flusso di informazioni è unidirezionale, dal template verso il componente. Ipotizzando allora di avere il classico campo di input e un bottone, senza per ora inserire alcun form esplicito, potremmo scrivere:

<input #email placeholder="Inserisci la tua email">
<button (click)="invioDati(email.value)">Invia</button>

Come puoi osservare, abbiamo usato la notazione #email, per creare quella che viene chiamata "variabile locale del template".

In sostanza rappresenta un riferimento al campo input, che ci permette di accedere, in tempo reale, al valore inserito dall'utente, tramite la notazione:

nomevariabiletemplate.value

NB: E' interessante osservare che, in questo caso, il nome scelto per la variabili locale del template non presenta lettere maiuscole, minuscole. Nel caso avessi scelto invece il nome #mia-email, il recupero del valore del campo dovrebbe essere fatto usando la notazione che pr...

Per continuare la lettura, registrati gratuitamente alla "WebApp StartUniversity" oppure effettua il login.

Novità Amazon (-15% di sconto)

Non farti scappare il mio libro appena aggiornato: "Angular 100% Operativo". Un corso completo su Angular per imparare rapidamente le tecniche per creare WebAPP e non solo.Prenotalo cliccando l'immagine qui sotto:

Corso Angular 100% Operativo

Ti è servito il breve tutorial? Condividilo ADESSO sui social! Grazie :-)

Categoria: Articolo - Autore: Davide Copelli

Voto 4.8/5 basato su 83 Recensioni
© 2013-2018 CreareAPP.com - Tutti i diritti riservati. Tutorial e WebCAMP per creare app in Android e iOS
NB: Tutti i marchi citati sono di proprietà dei rispettivi proprietari. Android is a trademark of Google Inc.