Input from the form is not passed to the controller and keeps being "undefined"

Question

I have the hardest time dealing with forms and passing values from them to the controller. I have the same story every time: the ng-model and everything is set up but the controller is not accepting what I'm trying to pass it and thus gives me that the var is not defined. Would anyone suggest how to deal with this and how to properly setup forms with Angular? Their documentation is darn awful!

Here's the markup of the form:

<div>
    <form name="thisForm" ng-submit="submit()" class="wa-id-submit-form">

        <label>Submit your number</label>
        <input name="wa_id" ng-model="submission" type="text" class="form-control" required />

        <input type="submit" class="form-control" name="submit" value="Submit" />
    </form>
</div>

Here's the function and the var I'm trying to pass it to:

   $scope.submit = function() {
                  var data = {
                      "wa_id": $scope.wa_id
                  };

                  console.log($scope.wa_id);

                  var hookphp = submitIdService.submitId();
                  hookphp.save(data,
                    function(result){
                        console.log(result);
};

The php side of this all works just fine and doesn't need to be looked at. I just need to pass that one line from the input to the data variable and it's not. Am I not making the ng-model and such talk properly to each other? }, function(result){ console.log('NO GO'); } ); };

score 0 · Answer 1 · answered May 05 '15 at 14:06

0

You should use corresponding ngModel to access data in controller, not input name:

var data = {
    wa_id: $scope.submission
};

answered May 05 '15 at 14:06

dfsq

191,768
25
236
258

The problem remains. Still undefined. – Varvara Jones May 05 '15 at 14:14

score 0 · Answer 2 · edited May 23 '17 at 12:21

I have been reminded of something very important when dealing with ng-models here

The ng-model has to have a .notation in it to function properly. It's possible that it would function without it as well, but even people who help develop Angular strongly recommend using it with a "."

Here's what had to be done with my code:

<form ng-submit="submit()" class="wa-id-submit-form">

        <label>Submit your number</label>
        <input name="waid" ng-model="waid.submission" type="text" class="form-control" required />

        <input type="submit" class="form-control" name="submit" value="Submit" />
    </form>

an ng:

$scope.waid = {};

$scope.submit = function() {

var data = {
    "wa_id": $scope.submission
};

var hookphp = submitIdService.submitId();
hookphp.save(data,
function(result){
console.log(result);
},
function(result){
console.log('NO GO');
}
);
};

An object had to be declared "empty" prior to being able to use it in the function as well.

Input from the form is not passed to the controller and keeps being "undefined"

2 Answers2