Symfony 2 Angular JS HTTP POST

Question

I have a form that i submit using angularJS http method.

code :

<script>
    // define angular module/app
    var formApp = angular.module('formApp', []);
    // create angular controller and pass in $scope and $http
    function formController($scope, $http) {
        // create a blank object to hold our form information
        // $scope will allow this to pass between controller and view
        $scope.formData = {};
        // process the form
        $scope.processForm = function () {
            $http({
                method: 'POST',
                url: 'http://localhost/angular/web/app_dev.php/testcall',
                data: $.param($scope.formData), // pass in data as strings
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}  // set the headers so angular passing info as form data (not request payload)
            })
                    .success(function (data) {
                        console.log(data);
                        if (!data.success) {
                            // if not successful, bind errors to error variables
                            $scope.errorName = data.errors.name;
                            $scope.errorSuperhero = data.errors.superheroAlias;
                        } else {
                            // if successful, bind success message to message
                            $scope.message = data.message;
                            $scope.errorName = '';
                            $scope.errorSuperhero = '';
                        }
                    });
        };
    }
</script>

my form :

    <div class="container">
    <div class="col-md-6 col-md-offset-3">

        <!-- PAGE TITLE -->
        <div class="page-header">
            <h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1>
        </div>

        <!-- SHOW ERROR/SUCCESS MESSAGES -->
        <div id="messages" class="well" ng-show="message">{% verbatim %}{{ message}}{% endverbatim %}</div>

        <!-- FORM -->
        <form ng-submit="processForm()">
            <!-- NAME -->
            <div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }">
                <label>Name</label>
                <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
                <span class="help-block" ng-show="errorName">{% verbatim %}{{ errorName}}{% endverbatim %}</span>
            </div>

            <!-- SUPERHERO NAME -->
            <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }">
                <label>Superhero Alias</label>
                <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias">
                <span class="help-block" ng-show="errorSuperhero">{% verbatim %}{{ errorSuperhero}}{% endverbatim %}</span>
            </div>

            <!-- SUBMIT BUTTON -->
            <button type="submit" class="btn btn-success btn-lg btn-block">
                <span class="glyphicon glyphicon-flash"></span> Submit!
            </button>
        </form>

        <!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED -->
        <pre>
            {% verbatim %}{{ formData}}{% endverbatim %}
        </pre>

    </div>
</div>

my function where i want my form data from the http request :

 /**
 * @Route("/testcall")
 * @Template()
 */
public function testAction() {
    var_dump($_POST);
    exit;
}

The only thing i get is this url :

http://localhost/angular/web/app_dev.php/test?name=Tommie&superheroAlias=Crawford

So the values from the form are saved in the URL. But its not in the $_POST variable.. Its looks like that the function testAction never get accessed

How can i fix this?

look at github.com/FriendsOfSymfony/FOSRestBundle to provide APIs for your app and call them with angular — Perroin Thibault
– Perroin Thibault, Commented Apr 3, 2015 at 10:00
Start by verifying the correct request is being made by pressing F12 in your browser and looking at the network tab. That will narrow down the problem to either an angular generation thing or a php router thing. — Cerad
– Cerad, Commented Apr 3, 2015 at 10:03

Einius · Accepted Answer · 2015-04-03 16:11:28Z

5

You have to access data from the request. If you post JSON object like

{
     "foo": "bar"
}

Your controller's action should look something like that:

public function postAction(Request $request)
{
    $data = json_decode($request->getContent(), true);
    $request->request->replace($data);

    //echo below should output 'bar'
    echo $request->request->get('foo');

    //return response
    //....
}

more detailed information about that could be found here

answered Apr 3, 2015 at 16:11

Einius

1,3922 gold badges22 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Symfony 2 Angular JS HTTP POST

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