AngularJS: validazione degli indirizzi e-mail

La validazione di un indirizzo e-mail è una procedura semplice in AngularJS.

Nella sua forma essenziale la validazione dell'e-mail in AngularJS si presenta in questo modo:


<form name="testForm" method="post" ng-submit="send()" ng-controller="TestCtrl" novalidate>
	<div>
		<input type="email" name="email" required />
	</div>
</form>

L'attributo novalidate fornisce ad AngularJS il controllo della validazione sottraendolo al browser. Gli errori di validazione possono essere gestiti in questo modo:


<div class="error-msgs" ng-show="testForm.email.$invalid && testForm.submitted">
    <small class="error" ng-show="testForm.email.$error.required">
         Your email is required.
    </small>
    <small class="error" ng-show="testForm.email.$error.email">
         That is not a valid email. Please input a valid email.
    </small>
           
</div>

Ossia:

  1. testForm.email.$invalid && testForm.submitted: Il form è stato inviato ma l'e-mail non supera la validazione.
  2. testForm.email.$error.required: L'utente non ha inserito alcun valore nel campo.
  3. testForm.email.$error.email: L'utente ha inserito un indirizzo e-mail non valido.

Quindi nel controller la verifica è semplice:


var app = angular.module('MyApp',[]);

app.controller('TestCtrl', ['$scope', function($scope) {
	$scope.formValid = true;
	$scope.send = function() {
		if($scope.testForm.$valid) {
			// Invio normale
		} else {
			$scope.formValid = false;
		}	
	};
	
}]);
Torna su