I Moduli Web in Angular

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: 7 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 prende il nome di "snake case" ossia nella forma miaEmail.value

Se provassi infatti ad inserire nel campo input, un gestore di evento che monitorizza la pressione di un tasto (keyup), e subito sotto un paragrafo, con la seguente notazione:

<input #email placeholder="Inserisci la tua email" (keyup)="0">
<button (click)="invioDati(email.value)">Invia</button>
<p>Valore inserito istante per i...

Ohps... scusami la fastidiosa interruzione, ma per questioni gestionali, tutti i tutorial completi gli ho spostati a questo link: WEBSU. Risulterà più semplice anche per te seguirli e chiedermi dei consigli. Ti aspetto, dai... bastano 5 secondi. Non buttare tutto lo sforzo fatto per arrivare qui.

Hai tempo per leggere? Angular

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

Categoria: Angular