3

I have a massive form with more or less 80 / 90 inputs.

My main problem is How can I pass all those inputs belonging to unique form in an ajax request without map the inputs manually into a object?

I know that with jquery you can use serialize() function selecting the form. Is there any helper function in angular to achieve that?

Thanks

3
  • It sounds like you're not using ng-model in your forms. Can you post the of the html/js you've got so far? Perhaps only showing a couple of the inputs though... Commented Jan 16, 2015 at 13:24
  • 2
    Yes, u need to use ng-model in each input, like person.name, person.address, person.secondname, ..... And on submit you just send object 'person' (which will automatically transformed to json). Commented Jan 16, 2015 at 13:45
  • Oh, That's correct I'm currently using ng-model to my inputs but I didn't think to pass the scope object to get all values! :) Thanks Commented Jan 16, 2015 at 13:51

1 Answer 1

2

Indeed, as Michal's comment suggested, it doesn't look like you are using ng-model.

Angular's jqLite doesn't support serialize() since with Angular one would typically build a ViewModel that would then be bound to a form.

But, if you are out of luck, you could add jQuery.js to get the serialize() support and create a simple directive - serializer - that would act on a form.

app.directive("serializer", function(){
  return {
    restrict: "A",
    scope: {
      onSubmit: "&serializer"
    },
    link: function(scope, element){
      // assuming for brevity that directive is defined on <form>

      var form = element;

      form.submit(function(event){
        event.preventDefault();
        var serializedData = form.serialize();

        scope.onSubmit({data: serializedData});
      });

    }
  };
});

And use it as follows:

<form serializer="submit(data)">
  <input name="foo">
  <input name="bar">
  <button type="submit">save</button>
</form>

And in the controller:

$scope.submit = function(data){
   console.log(data);
}

plunker

EDIT:

If you are using ng-model and in fact have a proper ViewModel, then this is the "Angular way" and so, you should have some object that is bound to the form inputs - you should just submit that.

<form name="foo" ng-submit="onSubmit()">
  <input ng-model="fooObject.a">
  <input ng-model="fooObject.b">
  ...
</form>

$scope.fooObject = {};
$scope.onSubmit = function(){
   $http.post("url/to/server", {data: $scope.fooObject})
     .success(...);
}
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks! I'm using ng-model in my inputs but I didn't think about that it generate the object with all the values. Thanks! Can you please add a little snippet on how you achieve that with the ng-model just to accept your question as correct :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.