Just starting out with Angular and working on a mobile app using angularjs and the ionic framework. I have an input field for project name that includes a directive to check if the name already exists, disabling data binding if it does. Any guidance would be appreciated.
<input type="text" name="projectname" projectname-available id="projectname" ng-minlength="3"
ng-maxlength="20" ng-pattern="projectPattern" required ng-model="form.projectname" >
<div class="error-container" ng-show="authorizationForm.projectname.$invalid && authorizationForm.projectname.$touched" ng-messages="authorizationForm.projectname.$error" ng-messages-include="templates/error-list.html">
<div class="error" ng-message="required">
<i class="ion-information-circled"></i>
This field is invalid!
</div>
<div class="error" ng-if="authorizationForm.$error.projectnameExists" >
<i class="ion-information-circled"></i>
Project name exists already
</div>
</div>
This code snippet shows the custom directive:
.directive('projectnameAvailable', function($timeout, $q,$cordovaSQLite) {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, elm, attr, model) {
model.$asyncValidators.projectnameExists = function(projectName) {
// Check backend for existing project name and return a promise
query = "SELECT * FROM project WHERE name = ? ";
$cordovaSQLite.execute(db, query, [projectName]).then(function(res1) {
if(res1.rows.length>0) {
exist = true;
console.log('Project found');
}
else
{
console.log('Project not found');
return exist = false;
}
}, function (err) {
console.error(JSON.stringify(err));
}
);
var defer = $q.defer();
$timeout(function(){
model.$setValidity('projectnameExists', !exist);
defer.resolve;
}, 2000);
return defer.promise;
};
}
}
Debugging:
console.log('Project name '+$scope.form.projectname );
The output of this log statement is showing as undefined.