angular promise – on submit gets "Error: args is null $parseFunctionCall"

I am currently following this tuto on MEAN.js : https://thinkster.io/mean-stack-tutorial/ .

I am stuck into the end of “Wiring Everything Up”, I am completlty new to angular so I am not pretending I understood everything I did. Here is the situation :

We are using the plugin ui-router.

First here is the html template :

<form name="addComment" ng-submit="addComment.$valid && addComment()"novalidate>
    <div class="form-group">
        <input class="form-control" type="text" placeholder="Comment" ng-model="body" required/>
    </div>
    <button type="submit" class="btn btn-primary">Comment</button>
</form>

The error “Error: args is null $parseFunctionCall” occurs only when I submit the form

Then, here is the configuration step for this page :

app.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('posts', {
                url        : '/posts/{id}',
                templateUrl: '/posts.html',
                controller : 'PostsCtrl',
                resolve    : {
                    post: ['$stateParams', 'posts', function ($stateParams, posts) {
                        return posts.get($stateParams.id);
                    }]
                }
            });

        $urlRouterProvider.otherwise('home');
    }]);

There, is the controller :

app.controller('PostsCtrl', ['$scope', 'posts', 'post',
    function ($scope, posts, post) {
        $scope.post = post;

        $scope.addComment = function () {

            posts.addComment(post._id, {
                body  : $scope.body,
                author: 'user'
            }).success(function (comment) {
                $scope.post.comments.push(comment);
            });

            $scope.body = '';
        };

        $scope.incrementUpVote = function (comment) {
            posts.upvoteComment(post, comment);
        };
    }]);

And Finally, the factory where the posts are retrieved from a remote webservice

app.factory('posts', ['$http', function ($http) {
    var o = {
        posts: []
    };

    o.get = function (id) {
        return $http.get('/posts/' + id).then(function (res) {
            return res.data;
        });
    };

    o.addComment = function (id, comment) {
        return $http.post('/posts/' + id + '/comments', comment);
    };

    return o;
}]);

I’ve only given the parts that I think are relevant.

I suspect that the problem is comming from the promise and the scope which have been unlinked. I searched about promises but I think that ui-router is doing it differently.

I tried some $watch in the controller but without succeding.

Has anyone some idea about that ? Thank you in advance


Source: javascript

1 Comment

  1. Digin Dominic

    The form name addComment (used for addComment.$valid) and the function addComment added to the scope are clashing with each other, rename one or the other.

    See the Angular docs for the form directive:

    If the name attribute is specified, the form controller is published onto the current scope under this name.

    As you are manually also adding a function named addComment, it is using the wrong one when evaluating the ng-submit.

    Reply

Leave a Reply