Possiamo sfruttare le classi CSS aggiunte da AngularJS nella validazione dei campi dei form per creare stili specifici.
Le classi che ci interessano realmente sono due:
.ng-valid
: il campo supera la validazione.ng-invalid
: il campo non supera la validazione
Possiamo cambiare gli stili dei campi a seconda dell'esito della validazione:
#form input,
#form textarea {
transition: all 400ms ease-in;
border: 1px solid #ccc;
}
#form input.ng-invalid,
#form textarea.ng-invalid {
border-color: red;
}
#form input.ng-valid,
#form textarea.ng-valid {
border-color: green;
}