POST form data from angularjs to server

Question

I have a form:

<form ng-submit="submitForm()" name="theForm">
    <input type="number" name="age" ng-model="age" />
    <input type="submit" value="Submit" />
</form>

which I then submit with:

$scope.submitForm = function() {
    $http.post('/someplace', $scope.theForm);
}

The problem is that I want the POSTed data to be

{ "age", 42 }

but instead it is

{
    "$error": {},
    "$name": "theForm",
    "$dirty": true,
    "$pristine": false,
    "$valid": true,
    "$invalid": false,
    "$submitted": true,
    "age": {
        "$viewValue": "42",
        "$modelValue": "42",
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
            null,
            null
        ],
        "$formatters": [
            null
        ],
        "$viewChangeListeners": [],
        "$untouched": false,
        "$touched": true,
        "$pristine": false,
        "$dirty": true,
        "$valid": true,
        "$invalid": false,
        "$error": {},
        "$name": "age",
        "$options": null
    }
}

Is there a simple built-in way in angular to get the desired output?

Answer 1

I think you are trying to do things the way you were used to do for many years ;) (correct me if I'm wrong) General practice is to have model that later you send.

<form ng-submit="submitForm()" name="theForm">
  <input type="text" name="name" ng-model="userForm.name" required/>
  <input type="number" name="age" ng-model="userForm.age" required/>
  <input type="text" name="sex" ng-model="userForm.sex" required/>
  <input type="submit" value="Save" ng-disabled="theForm.$invalid" />
  <p ng-if="theForm.$dirty">Remember to save changes</p>
</form>

and then

$scope.submitForm = function() {
  $http.post('/someplace', {user: $scope.userForm});
}

plnr with validation http://plnkr.co/edit/WHSna0pWRfIegmwyxRt2?p=preview

Answer 2

Don't post form , post the desired data only.

$scope.submitForm = function() {
    $http.post('/someplace', { "age", $scope.age });
}

Posting the form with name will post all the form related data angular has gathered.

Edit:

If you still want to post data from form, and not from scope, you can do this

$scope.submitForm = function() {
        $http.post('/someplace', { "age", $scope.theForm.age.$modelValue });
    }

$scope.theForm.age.$modelValue will post model value of the input named age inside theForm , looks nice to read, and also useful if you don't even define a model on the age input, but seriously $scope.age would be just better

Answer 3

jQuery to the rescue, since Angular 1.3 doesn't seem to have a generalized way to get the form element vars without listing the var names explicitly.

    $scope.submitPost = function(){
        var postVars = {};
        $('form[name="myForm"]').find('input, select, textarea').each(function(i, el){
            var varName = $(el).attr('name');
            postVars[varName] = $scope[varName];
        });
        $http.post('/some-route', {postVars : postVars});
    };

Lodash (or Underscore) to the rescue.

$scope.submitPost = function(){
    var postVars = _.pick($scope, ['objKey1','objKey2','objKey3']);
    $http.post('/some-route', {postVars : postVars});
};

Answer 4

I came up with a little work around. This loops through the form's data picking out non-angular properties and then assigning the $modelValue to that key:

$scope.submitForm = function() {
    var form = {};
    for (var propName in $scope.theForm) {
        if (propName.charAt(0) != '$') {
            form[propName] = $scope.theForm[propName].$modelValue;
        }
    }

    $http.post('/someplace', form);
}