As ReCaptcha suggested I ended up creating a custom validation directive
var app = angular.module('login-form', []);
var INTEGER_REGEXP = new RegExp('^[a-z0-9]+(\.[_a-z0-9]+)*@@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,50})$', 'i');
app.directive('cemail', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (INTEGER_REGEXP.test(viewValue)) {
// it is valid
ctrl.$setValidity('cemail', true);
return viewValue;
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('cemail', false);
return undefined;
}
});
}
};
});
and in html
<label>Email</label>
<input id="UserName" name="UserName" type="text" value="" data-ng-model="email" required="" cemail>
<span data-ng-show="form.UserName.$dirty && form.UserName.$invalid">
<span data-ng-show="form.UserName.$error.required">Required</span>
<span data-ng-show="form.UserName.$error.cemail">Invalid Email</span>
</span>