AngularJS Form and $scope not updating each other

Question

I am trying to make a very minimalistic form in AngularJS (version 1).

I am trying to use ng-model and the $scope to update an object I've named fluff. Once a user clicks submit it should be used in this $http call.

I'm highly confused I thought ng-model would bind this to the object in the scope. But it always returns a blank cause the $scope.fluff is not updating.

Yet if I inject {{ fluff.link }} this will update based on the textbox.

Here is my form in the view:

    <form name="fluffForm" ng-submit="submitform()">
      <span>Link: <input type="text" name="link" ng-model="form.link"></span>
    <span>Description: <input type="text" name="description" ng-model="form.desc"></span>
      <button type="submit">submit</button>

    </form>
</div>

Here is my controller:

(function(){

    'use strict';

    angular.module('fluff').controller('FormController', FormController);


    FormController.$inject = ['$scope', '$rootScope', '$routeParams', '$window', '$http'];


    function FormController( $scope, $rootScope, $routeParams, $window, $http){

        var form = this;
        $scope.fluff = {}; // form data in json object(?) to be posted to mongo database
        $scope.submitform = function(){
            $scope.fluff.link = form.link; 
            $scope.fluff.description = form.desc; 
            console.log('form-data', $scope.fluff);
            $http({
                method: 'POST',
                url: 'http://fluff.link/share',
                data: $scope.fluff,
                headers: {'Content-type': 'application/x-www-form-urlenconded'}
            }).success(function(data){
                console.log('Call to API was successful');
                if(data.errors){
                    console.log('Data Errors');
                    console.log('error:', $data.errors.name);
                    //show errors  -  part of the response in the REST API have to make this portion up myself
                    $scope.errorName = $data.errors.name;

                } else {
                    console.log('returned share id', data);
                    var fluff = 'fluff/link/'+ data;
                    $window.location.href = fluff;
                }

            });

        }


    }

})();

Here is my route:

(function(){

    'use strict';

    angular.module('fluff').config(Config);

    Config.$inject = ['$routeProvider'];

    function Config($routeProvider){

        $routeProvider.when('/', {
            templateUrl: 'views/index.client.view.html',
            controller: 'FormController',
            controllerAs: 'form'
        });

    }

})();

Added some logs from the developer console in chrome:

in submitform FormController {link: "test", desc: "test"}
fluff.form.controller.js:24 form-data Object {link: undefined}

Got it to work! Will update with my answer when it allows!

I created a coden and it works. See codepen.io/thierry36t/pen/ObzjRd?editors=1111 What the console.log is displaying? — Thierry
– Thierry, Commented Dec 1, 2016 at 19:01
I created a plunker and it works too, where did you define the FormController? I defined it on the form itself. — Nick Vanderhoven
– Nick Vanderhoven, Commented Dec 1, 2016 at 19:07
What does console.log($scope.fluffForm) return? Does it have your description and link fields on it? If so, what are their $modelValue and $viewValues? — mhodges
– mhodges, Commented Dec 1, 2016 at 19:07
so I can get the information from the form using $scope.fluff.description = form.desc however it still isn't updating the fluff object properly :/ — Kyle Calica-St
– Kyle Calica-St, Commented Dec 1, 2016 at 19:25

Kyle Calica-St · Accepted Answer · 2016-12-01 23:11:18Z

1

So my problem here is that I wasn't using the form controller like I should have.

Here I have the template being loaded with the controller as form.

   $routeProvider.when('/', {
        templateUrl: 'views/index.client.view.html',
        controller: 'FormController',
        controllerAs: 'form'
    });

In the template I have to use form:

<span>Link: <input type="text" name="link" ng-model="form.link"></span>

<span>Description: <input type="text" name="description" ng-model="form.desc"></span>

then in the controller I create a this object:

var vm = this;

vm is now linked to form.

So now I can do this:

    var fluff = {};
    fluff.link = form.link;
    fluff.description = form.desc;

Now fluff has all the data it needs when my user clicks submit.

answered Dec 1, 2016 at 23:11

Kyle Calica-St

2,9936 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Form and $scope not updating each other

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related