angularjs: Better way to use ngModel.$asynValidators - html

Question

I just want to asked if there's a better way to improve my user validation codes.
directive.js
angular.module('installApp')
.directive('usernameValidator', function ($q, $timeout, $http) {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$asyncValidators.username = function(modelValue, viewValue) {
return $http.post('../api/v1/checkUsers', {user: {'username':viewValue}}).then(
function(response){
scope.checkUsers = response.data;
var deferred = $q.defer();
$timeout(function() {
if(scope.checkUsers['status'] == 404){
deferred.reject();
}else{
deferred.resolve();
}
}, 2000);
return deferred.promise;
});
};
}
}
});
accounts.html
<form name="myForm" ng-submit="submit()">
<div>
<label>Username: <input type="text" ng-model="signup.username" name="username" required username-validator>
</label>
<div ng-if="myForm.username.$dirty">
<div ng-messages="myForm.username.$error" class="validation-error">
<div ng-message="required">Username required</div>
<div ng-message="username">Username already in use</div>
</div>
<div ng-messages="myForm.username.$pending" class="validation-pending">
<div ng-message="username">Checking username availability... </div>
</div>
</div>
</div>
<div>
<label>Password: <input type="password" ng-model="signup.password" name="password" required></label>
<div ng-messages="myForm.password.$error" ng-if="myForm.password.$dirty" class="validation-error">
<div ng-message="required">Password required</div>
</div>
</div>
<button type="submit" ng-disabled="myForm.$invalid || myForm.$pending">Submit</button>
</form>
The above code is perfectly working fine, but there is a doubt in my mind on how can I improve it in a better way. I've seen many examples and I noticed they didn't used mostly the if/ else condition. Please help

Answer 1

One thing you could do is try to make your directive reusable.
A good example I found on the internet is coming from Year of moo
angular
.module('yourmodule')
.directive('recordAvailabilityValidator',
['$http', function($http) {
return {
require : 'ngModel',
link : function(scope, element, attrs, ngModel) {
var apiUrl = attrs.recordAvailabilityValidator;
function setAsLoading(bool) {
ngModel.$setValidity('recordLoading', !bool);
}
function setAsAvailable(bool) {
ngModel.$setValidity('recordAvailable', bool);
}
ngModel.$parsers.push(function(value) {
if(!value || value.length == 0) return;
setAsLoading(true);
setAsAvailable(false);
$http.get(apiUrl, { v : value })
.success(function() {
setAsLoading(false);
setAsAvailable(true);
})
.error(function() {
setAsLoading(false);
setAsAvailable(false);
});
return value;
})
}
}
}]);