Home Page Twitter Facebook Feed RSS
NotJustCode
Apri

Validatori 2120 Visite) AngularJs

Fin qui abbiamo visto come AngularJS crei una connessione tra interfaccia e dati, in particolar modo nei Form. Una delle feature più utili é la gestione dei messaggi di validazione. In AngularJS é relativamente facile verificare e notificare la correttezza dei dati inseriti dall'utente.

Creiamo una Form con un input. Tramite tag HTML specifichiamo che il campo è obbligatorio.

<form novalidate="novalidate" name="myform">

<input type="text" data-ng-model="current.name" name="name" required="" autocomplete="off" />

</form>

Se osservate il codice HTML con le utility del browser noterete che a seconda delle iterazioni AngularJS aggiungerà delle classi sia alla Form che all'input.

  • ng-valid: il modello è valid
  • ng-invalid: il modello non è valido
  • ng-pristine: non c'è stata interazione con il controllo
  • ng-dirty: c'è stata una interazione con il controllo
  • ng-touched: il controllo è stato modificato
  • ng-untouched: il controllo non è stato modificato
  • ng-pending: per i validatori asincroni indica che il sistema è in attesa

Questo rappresenta un primo modo di interazione. Basterà gestire queste classi nel css per stilizzare gli elementi. La vera utilità sta, tuttavia, nelle funzionalità che AngularJS mette a disposizione.

<span ng-show="form.name.$error.required">Name Required.</span>

Quando creiamo una Form AngularJS crea un oggetto con tutti i nostri controlli di cui conserva stato e proprietà. Ad esempio $error conserva la validità. La proprietà required indicherà se il requisito required é rispettato.

Potete sfruttare tutte le caratteristiche native di HTML (email, interi, range di valori, email etc) e li ritroverete tra le proprietà.

  • max
  • maxlength
  • min
  • minlength
  • number
  • pattern
  • required
  • url
  • date
  • datetimelocal
  • time
  • week
  • month

Più semplicemente la proprietà $invalid vi dirà se il controllo non è valido.

Giocando con le proprietà $dirty e $invalid potrete far comparire messaggi di validazione quando i campi vengono valorizzati in modo errato.

Per quanto riguarda la Form anch'essa dispone della proprietà $invalid che indica la presenza di errori e con cui potrete disabilitare i pulsanti di invio finché la Form non è valida.

  • $valid  controllo valido
  • $invalid  controllo non valido
  • $pristine  controllo non usato
  • $dirty  controllo usato

Potete infine utilizzare un vostro validatore

app.directive("odd", function() {

return {

restrict: "A",        

require: "ngModel",        

link: function(scope, element, attributes, ngModel) {

ngModel.$validators.odd = function(modelValue) { 

return modelValue % 2 === 1;

}

}

};

});

Per utilizzare il validatore

<input type="number" data-ng-model="current.numberOdd" name="numberOdd" required="" odd />

<span data-ng-show="myform.numberOdd.$error.odd && myform.numberOdd.$dirty">Odd</span>

 

Vi lascio al sorgente