Sommario
Quando lavoriamo alla realizzazione di applicazioni a pagina singola, uno dei punti che possiamo evidenziare è l'inserimento dei dati, questo tipo di funzionalità viene solitamente svolto con l'utilizzo di un moduloOvviamente, se vogliamo richiedere dati a un utente, dobbiamo verificare che non contengano errori.fortunatamente AngularJS Dispone di alcuni meccanismi interni che ci consentono di effettuare convalide in modo semplice, consentendo così l'invio del modulo solo quando le condizioni del formato dei dati sono soddisfatte.
La prima cosa di cui avremo bisogno è un modulo, andremo a inserire alcuni campi, ad esempio nome, cognome e un campo email, in genere, questi sono i tipi di campi più utilizzati e che ci daranno l'opportunità di generare convalide. Vediamo il codice iniziale che abbiamo:
Nome:Cognome:E-mail:Età:Spedire
Se guardiamo abbiamo usato le caratteristiche di HTML per convalidare i campi, ad esempio inserendo la proprietà necessario per i campi obbligatori penseranno che funzionerà solo nei browser più recenti o compatibili HTML5 solo, ma quando usiamo AngularJS, questo riempirà le convalide alternative se apriamo l'applicazione in un browser non compatibile con HTML5.
Vediamo che il campo età ha, oltre alla convalida del tipo, due proprietà di AngularJS che sono per la lunghezza del campo, questo significa che possiamo inserire solo numeri tra 1 e 3 cifre in totale.
Finora stiamo andando bene con il nostro esercizio, tuttavia dobbiamo ancora convalidare che per inviare i dati tutto deve essere convalidato, per questo dobbiamo generare un controller che ci permetta di farlo, per questo indicheremo al modulo quale controller utilizzerà, per cambiare la riga:
Con il seguente:
All'interno del controller possiamo accedere a una proprietà chiamata $ valido, che è quello che indicherà se il nostro modulo è valido per poter inviare i dati, per questo dobbiamo modificare la riga del pulsante di invio dati con quanto segue:
Spedire
La modifica dovrebbe essere la seguente:
Spedire
Finalmente possiamo creare il nostro controller in AngularJS con il quale elaboreremo i nostri dati:
function AddControllerUser ($ scope) {$ scope.message = ''; $ scope.addUser = function () {$ scope.message = 'Grazie,' + $ scope.user.name + ', è stato aggiunto!'; }; } Questo dovrebbe darci un risultato come il seguente nel nostro browser:
