Convalida del modulo AngularJS
AngularJS può convalidare i dati di input.
Convalida del modulo
AngularJS offre la convalida dei moduli lato client.
AngularJS monitora lo stato del modulo e dei campi di input (input, textarea, select) e consente di notificare all'utente lo stato corrente.
AngularJS contiene anche informazioni sul fatto che siano stati toccati, modificati o meno.
Puoi utilizzare gli attributi HTML5 standard per convalidare l'input oppure puoi creare le tue funzioni di convalida.
La convalida lato client non può da sola proteggere l'input dell'utente. È necessaria anche la convalida lato server.
Necessario
Utilizzare l'attributo HTML5 requiredper specificare che il campo di input deve essere compilato:
Esempio
Il campo di inserimento è obbligatorio:
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Utilizzare il tipo HTML5 emailper specificare che il valore deve essere un'e-mail:
Esempio
Il campo di input deve essere una e-mail:
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Stato modulo e stato di input
AngularJS aggiorna costantemente lo stato sia del modulo che dei campi di input.
I campi di input hanno i seguenti stati:
$untouchedIl campo non è stato ancora toccato$touchedIl campo è stato toccato$pristineIl campo non è stato ancora modificato$dirtyIl campo è stato modificato$invalidIl contenuto del campo non è valido$validIl contenuto del campo è valido
Sono tutte proprietà del campo di input e sono o true
o false.
I moduli hanno i seguenti stati:
$pristineNessun campo è stato ancora modificato$dirtyUno o più sono stati modificati$invalidIl contenuto del modulo non è valido$validIl contenuto del modulo è valido$submittedIl modulo viene inviato
Sono tutte proprietà del modulo e sono o true
o false.
È possibile utilizzare questi stati per mostrare messaggi significativi all'utente. Esempio, se un campo è obbligatorio e l'utente lo lascia vuoto, dovresti dare all'utente un avviso:
Esempio
Mostra un messaggio di errore se il campo è stato toccato E è vuoto:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
Classi CSS
AngularJS aggiunge classi CSS a moduli e campi di input a seconda dei loro stati.
Le classi seguenti vengono aggiunte o rimosse dai campi di input:
ng-untouchedIl campo non è stato ancora toccatong-touchedIl campo è stato toccatong-pristineIl campo non è stato ancora modificatong-dirtyIl campo è stato modificatong-validIl contenuto del campo è validong-invalidIl contenuto del campo non è validong-valid-keyUna chiave per ogni convalida. Esempio:ng-valid-required, utile quando ci sono più cose che devono essere convalidateng-invalid-keyEsempio:ng-invalid-required
Le classi seguenti vengono aggiunte o rimosse dai moduli:
ng-pristineNessun campo non è stato ancora modificatong-dirtyUno o più campi sono stati modificating-validIl contenuto del modulo è validong-invalidIl contenuto del modulo non è validong-valid-keyUna chiave per ogni convalida. Esempio:ng-valid-required, utile quando ci sono più cose che devono essere convalidateng-invalid-keyEsempio:ng-invalid-required
Le classi vengono rimosse se il valore che rappresentano è false.
Aggiungi stili per queste classi per dare alla tua applicazione un'interfaccia utente migliore e più intuitiva.
Esempio
Applicare stili, utilizzando CSS standard:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
I moduli possono anche essere stilizzati:
Esempio
Applicare gli stili per i moduli non modificati (pristine) e per i moduli modificati:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Convalida personalizzata
Creare la propria funzione di convalida è un po' più complicato; Devi aggiungere una nuova direttiva alla tua applicazione e gestire la convalida all'interno di una funzione con determinati argomenti specificati.
Esempio
Crea la tua direttiva, contenente una funzione di convalida personalizzata, e fai riferimento ad essa usando my-directive.
Il campo sarà valido solo se il valore contiene il carattere "e":
<form name="myForm">
<input name="myInput" ng-model="myInput" required
my-directive>
</form>
<script>
var app = angular.module('myApp',
[]);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
Esempio spiegato:
In HTML, si farà riferimento alla nuova direttiva utilizzando l'attributo
my-directive.
In JavaScript iniziamo aggiungendo una nuova direttiva denominata myDirective.
Ricorda, quando assegni un nome a una direttiva, devi usare un nome camel case,
myDirective, ma quando lo invoca, devi usare -un nome separato,
my-directive.
Quindi, restituisci un oggetto in cui specifichi che require ngModel, che è ngModelController.
Crea una funzione di collegamento che accetta alcuni argomenti, dove il quarto argomento, mCtrl, è il ngModelController,
Quindi specifica una funzione, in questo caso denominata myValidation, che accetta un argomento, questo argomento è il valore dell'elemento di input.
Verificare se il valore contiene la lettera "e" e impostare la validità del controller del modello su trueo false.
Infine, mCtrl.$parsers.push(myValidation);aggiungerà la
myValidationfunzione a un array di altre funzioni, che verranno eseguite ogni volta che il valore di input cambia.
Esempio di convalida
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user"
required>
<span style="color:red" ng-show="myForm.user.$dirty &&
myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username
is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span
style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',
function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
L'attributo del modulo HTML novalidate viene utilizzato per disabilitare la convalida del browser predefinito.
Esempio spiegato
La direttiva AngularJS ng-model lega gli elementi di input al modello.
L'oggetto modello ha due proprietà: user e email .
A causa di ng-show , gli intervalli con color:red vengono visualizzati solo quando l'utente o l'e-mail è $dirty e $invalid .