I have a little problem developing a simple GUI for a game idea using AngularJS (v1.3.15) and Angular-Route. Anyway, for the registration, i want to pre-check the availability for the username while being typed. I set up a $watch, call the factory service to get an $http.post answer, but in my controller, I get the error "fwMainService.checkUsernameAvailability(...).then is not a function". I triple checked every spelling, the syntax and logic (btw I'm new to Angular). Every other factory function is working as it is supposed to.

Is it because checkUsernameAvailability() should return a promise, not a string?

Any ideas? Thanks in advance!

My Factory:

"use strict";

fwApp.factory('fwMainService', function ($http) {

var mFac = {};

mFac.checkUsernameAvailability = function (username) {
    if(username != '') {
        if(username.length >= 3) {
            $http.post('api/user/usernameInUse.php', {newUser: username})
            /* returns '1' if in use, '0' if free */
            .success(function (res) {
                if(res == '1') { // Username in use
                    return 'In Use!';
                } else if(res == '0') {
                    return 'Free!';
                }
            })
            .error(function (error) {
                console.log("username check error: ", error);
            });
        } else {
            return 'Username too short!';
        }
    } else {
        return ''; // if empty, do not check
    }
};

[...]

// Public API
return {
    checkUsernameAvailability: function (username) {
        return mFac.checkUsernameAvailability(username);
},
[...]

My Controller:

"use strict";    

fwApp.controller('IndexCtrl', 
         ['$scope', '$http', '$timeout', '$location', 'fwMainService', 
function ( $scope,   $http,   $timeout,   $location,   fwMainService) {

/* username input field model = newUser.username */
$scope.$watch("newUser.username", function (newValue, oldValue) {
    if(angular.equals(newValue, oldValue)) {
        return;
    }
    fwMainService.checkUsernameAvailability(newValue).then(function (res) {
        console.log("return", res.data);
        $scope.newUserMsg = res.data; // Setting infobox to "Free!" or "In Use!"
    }, function (error) {
        console.log("username check Error:", error);
    });

});

[...]

Edit #1: I added a jsfiddle: / Maybe someone gets it working...

I have a little problem developing a simple GUI for a game idea using AngularJS (v1.3.15) and Angular-Route. Anyway, for the registration, i want to pre-check the availability for the username while being typed. I set up a $watch, call the factory service to get an $http.post answer, but in my controller, I get the error "fwMainService.checkUsernameAvailability(...).then is not a function". I triple checked every spelling, the syntax and logic (btw I'm new to Angular). Every other factory function is working as it is supposed to.

Is it because checkUsernameAvailability() should return a promise, not a string?

Any ideas? Thanks in advance!

My Factory:

"use strict";

fwApp.factory('fwMainService', function ($http) {

var mFac = {};

mFac.checkUsernameAvailability = function (username) {
    if(username != '') {
        if(username.length >= 3) {
            $http.post('api/user/usernameInUse.php', {newUser: username})
            /* returns '1' if in use, '0' if free */
            .success(function (res) {
                if(res == '1') { // Username in use
                    return 'In Use!';
                } else if(res == '0') {
                    return 'Free!';
                }
            })
            .error(function (error) {
                console.log("username check error: ", error);
            });
        } else {
            return 'Username too short!';
        }
    } else {
        return ''; // if empty, do not check
    }
};

[...]

// Public API
return {
    checkUsernameAvailability: function (username) {
        return mFac.checkUsernameAvailability(username);
},
[...]

My Controller:

"use strict";    

fwApp.controller('IndexCtrl', 
         ['$scope', '$http', '$timeout', '$location', 'fwMainService', 
function ( $scope,   $http,   $timeout,   $location,   fwMainService) {

/* username input field model = newUser.username */
$scope.$watch("newUser.username", function (newValue, oldValue) {
    if(angular.equals(newValue, oldValue)) {
        return;
    }
    fwMainService.checkUsernameAvailability(newValue).then(function (res) {
        console.log("return", res.data);
        $scope.newUserMsg = res.data; // Setting infobox to "Free!" or "In Use!"
    }, function (error) {
        console.log("username check Error:", error);
    });

});

[...]

Edit #1: I added a jsfiddle: http://jsfiddle/Kyrm/71kz617g/6/ Maybe someone gets it working...

• javascript
• angularjs
• service
• factory

Share Improve this question Follow edited May 22, 2015 at 10:25 Robin K asked May 22, 2015 at 9:09 Robin KRobin K 43766 silver badges1717 bronze badges 8

• Try this return checkUsernameAvailability(username); – carton Commented May 22, 2015 at 9:15
• in your factory replace return mFac.checkUsernameAvailability(username); by return checkUsernameAvailability(username); (i am not sure of this solution but you can try) – carton Commented May 22, 2015 at 9:17
• Negative, i get Error: checkUsernameAvailability is not defined, thx though – Robin K Commented May 22, 2015 at 9:31
• Could you make a codepen please, so i can try to help you :) – carton Commented May 22, 2015 at 9:33
• please excuse my nescience, but what is a codepen? sth like plunker or jsfiddle? – Robin K Commented May 22, 2015 at 10:06

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 3

The jsFiddle needed some tweaking to work, but in general, what you need to do to make this work is:

• In the mFac.checkUsernameAvailability function you need to return the $http.post() result.
• You need to inject $q to the factory.
• Instead of returning res.data, just return res
• In all occurrences in which you return a string, return $q.when(str) (where str is the string). This will make sure all exist paths of your function return a promise (and then you can call then in all cases).