I am facing an issue with the directive meant to verify username availability. Despite getting a response from the server, the form continues to disable the submit button.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.name = 'World';
});
myApp.directive('verifyStore', function($timeout, $q, $http) {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, elm, attr, model) {
model.$asyncValidators.usernameExists = function() {
//here you should access the backend, to check if username exists
//and return a promise
return $http.get('/api/verifystore').then(function(res){
$timeout(function(){
model.$setValidity('usernameExists', true); ---> or false button still disabled
}, 1000);
});
};
}
}
});
<div class="form-group">
<input type="text" verify-store ng-model="storename" class="form-control" name="merchant.store_name" placeholder="Store Name" ng-model-options="{ updateOn: 'blur' }" required>
<div ng-if="signupForm.$pending.usernameExists">checking....</div>
<div ng-if="signupForm.$error.usernameExists">username exists already</div>
</div>
The Submit button
<button type="submit" ng-disabled="signupForm.$invalid" class="btn btn-primary pull-right">
Submit <i class="fa fa-arrow-circle-right"></i>
</button>
Thank you for your help!