AngularJS dispone di una direttiva specifica per gli elementi input che permette l'uso delle espressioni regolari sui valori dei form.
ng-pattern accetta come valore un'espressione regolare che verificherà la validità dei valori inseriti. Se ad esempio volessimo validare un form per l'inserimento della partita IVA e del codice fiscale:
<body ng-app="MyApp">
<form name="myForm" novalidate method="post" id="form" ng-controller="FormCtrl" ng-submit="send()">
<p class="bg-danger text-danger" ng-show="error">Dati non validi</p>
<p class="bg-success text-success" ng-show="success">Dati validi</p>
<p>
<input type="text" name="vat-number" class="form-control" placeholder="Partita IVA" ng-pattern="/^\d{11}$/" ng-model="formData.vatNumber" required />
</p>
<p>
<input type="text" name="tax-code" class="form-control" placeholder="Codice Fiscale" ng-pattern="/^[A-Z0-9]{16}$/" ng-model="formData.taxCode" required />
</p>
<p>
<input type="submit" class="btn btn-primary" value="Invia" />
</p>
</form>
</body>
Il primo pattern verifica che il valore sia lungo 11 caratteri e composto solo da numeri, mentre il secondo pattern verifica che il valore contenga almeno 16 caratteri e che contenga lettere maiuscole e numeri. Il codice JavaScript è il seguente:
var app = angular.module('MyApp', []);
app.controller('FormCtrl', ['$scope', function($scope) {
$scope.success = false;
$scope.error = false;
$scope.formData = {};
$scope.send = function() {
$scope.success = false;
$scope.error = false;
if($scope.myForm.$valid) {
$scope.success = true;
} else {
$scope.error = true;
}
};
}]);