AngularJS: usare le classi CSS della validazione dei campi dei form

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:

  1. .ng-valid: il campo supera la validazione
  2. .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;
}

Torna su