creareapp angularI Moduli Web in Angular 4

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

Ultimo aggiornamento: 3 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 "CreareApp StartUniversity" oppure effettua il login.

Novità

Non farti scappare il nuovo libro: "Angular 100% Operativo", in offerta su Amazon. Più di 200 pagine, con tutto il percorso per creare una WebAPP e imparare Angular in un quarto del tempo. Prenotalo cliccando l'immagine qui sotto:

Corso Angular 4 100% Operativo

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

Categoria: Articolo - Autore: Davide Copelli

Voto 4.3/5 basato su 83 Recensioni
© 2013-2017 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.