AngularJS: mostrare i messaggi di errore della validazione dei form in modo condizionale

Gli errori di validazione dei form possono essere mostrati in modo condizionale in AngularJS.

Consideriamo il seguente frammento di codice:

<form name="signupForm" novalidate>
	<div class="form-group">
		 <label for="username">Username</label>
          <input type="text" placeholder="Username" name="username" ng-minlength="3" ng-maxlength="20"
                 ng-class="{error: signupForm.username.$dirty && signupForm.username.$invalid}"
                 required />
        <div class="error bg-danger text-danger" ng-show="signupForm.username.$dirty && signupForm.username.$invalid && !signupForm.username.$focused">
          <small class="error" ng-show="signupForm.username.$error.required">
                 Your username is required.
          </small>
          <small class="error" ng-show="signupForm.username.$error.minlength">
                 Your username is required to be at least 3 characters
          </small>
          <small class="error" ng-show="signupForm.username.$error.maxlength">
                 Your username cannot be longer than 20 characters
          </small>
        </div>
	</div>
</form>

I messaggi di errore vengono mostrati in ordine sequenziale:

1. $invalid: il campo non soddisfa globalmente i criteri di validazione
2. required: il campo è stato lasciato vuoto (l'attributo required)
3. minlength: il campo non soddisfa la direttiva ng-minlength
4. maxlength: il campo non soddisfa la direttiva ng-maxlength.

La direttiva condizionale ng-show mostrerà in questo modo gli errori solo se questi si sono effettivamente verificati. Importante è l'uso di $focused per evitare che la validazione parta quando l'utente ha selezionato il campo.