I have a registration form and I want to do live input validation for emails that have already been registered in the database.
I have the directive working so that it fires on every change to the input box, but I'm having trouble getting Angular to set the proper .error CSS classes from within the scope.$watch function.
Here is my markup:
<form ng-app="mainApp" id="signup_form" name="signup_form" ng-controller="signupController" ng-submit="submit()" novalidate >
<fieldset>
<legend>Create New Account</legend>
<div class="control-group" ng-class="{ error: signup_form.username.$invalid }">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" placeholder="Username" name="username"
ng-model="username"
ng-minlength=3
ng-maxlength=20 required />
</div>
</div>
<div class="control-group" ng-class="{ error: signup_form.email.$invalid}">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" placeholder="Email" name="email"
ng-model="email"
required
uniqueaddress/>
</div>
</div>
<ul>
<li ng-show="signup_form.$error.required" class="error">Field is required.</li>
<li ng-show="signup_form.$error.minlength" class="error">Field must at least 3 characters</li>
<li ng-show="signup_form.$error.maxlength" class="error">Field is too long.</li>
<li ng-show="signup_form.$error.uniqueaddress" class="error">Email is already in use</li>
</ul>
</fieldset>
<button type="submit" ng-disabled="signup_form.$invalid" class="btn">Submit</button>
</form>
Notice the directive attribute 'uniqueaddress' on the second input box. Here is my directive for uniqueaddress:
mainApp.directive('uniqueaddress', function() {
return {
restrict: 'A',
link: function (scope, element, attrs, ctrl)
{
var isEmailValid = false;
var isEmailValid = scope.$watch(attrs.ngModel, function (email)
{
if(email == 'test')
scope.signup_form.$setValidity('uniqueaddress', false);
else
scope.signup_form.$setValidity('uniqueaddress', true);
});
}
};
});
And here is a fiddle of demonstarting the issue: http://jsfiddle.net/k4Cty/10/
Type in any 3 character string and the validation works fine for the username field. For the email field, if you type in the string 'test', the validation fires and the <li> item tagged with ng-show="signup_form.$error.uniqueaddress" appears however the .error class is not being set for <div class="control-group"> because it does not go red indicating an validation error. It seems to setting the .error class for the default ng-minlength and required directives are firing but not for uniqueaddress. What am I doing wrong here?
