使用 angularjs 提交 symfony2 表单

Question

我正在后端使用 symfony2 构建应用程序。我正在考虑在前端使用 AngularJS，但我仍然想使用 symfony 表单。我已经使用正确的模块和所有内容设置了表单，但是实际提交数据时会出现问题。

问题

当 Symfony 呈现表单时，它会将输入的 'name' 属性设置为一个数组，例如 user[username]，这是它希望在提交后接收数据的格式。我不知道如何让 Angular 以这种格式提交数据。这就是我所拥有的：

<body ng-app="formApp" ng-controller="formController">
{{ form_start(form, {'attr':{'id': 'registerForm', 'ng-submit':'processForm()'}}) }}

{{ form_row(form.username, {'attr':{'ng-model':'formData.username'}}) }}
{{ form_row(form.password.first, {'attr':{'ng-model':'formData.password'}}) }}
{{ form_row(form.password.second) }}
{% for address in form.userAddresses %}
        {{ form_row(address.postalCode, {'attr':{'ng-model':'formData.postalCode'}}) }}
{% endfor %}

<div><input type="submit" value="Save" /></div>
{{ form_end(form) }}
</body>

和控制器：

function formController($scope, $http) {

$scope.formData = {};

$scope.processForm = function() {
    $http({
        method  : 'POST',
        url     : submit,
        data    : $.param($scope.formData), 
        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
    })
        .success(function(data) {
            alert(data.message);
        });
};
}

当我提交时，显然名称-值对使用了formData 变量，所以username=testuser 而不是user[username]=testuser。

我尝试将 formData 变量设置为 formData.user[username]，但这根本不起作用。

那么有没有办法在提交时使用输入“名称”，或者做一些事情以便以正确的格式提交表单？任何帮助都会很棒！

Answer 1

我认为你应该保留 Angular 表单逻辑。您应该使用ng-model 来绑定数据。为此，您可以创建一个 Twig 表单主题，将ng-model 属性添加到您的输入中，请查看this gist。

然后您可以将输入值传递给控制器​​中的 $scope.data 变量，如下所示：

$scope.var = {};

您应该使用第 109 行this article 中提供的函数序列化数据，或者如果您使用 jQuery，则使用 jQuery.param()。

然后像这样创建一个提交方法：

$scope.submit = function(){
    $http.post(
        'http://www.myurl.com',
        this.serializeData($scope.data),
        { headers: {
                'Content-Type': 'application/x-www-form-urlencoded' //Fix for Symfony
            }
        })
    .success(function(data) {
       //
    })
    .error(function (data){
        $log.error(data);
    });
}

Answer 2

您可以使用 {'data-ng-model': 'formData["user[username]"]'}。 要发布 formData，您应该通过 jQuery.param() 传递它。

Answer 3

我使用服务器端代码解决它。在处理请求和验证之前，我调用了我创建的以下函数来更改格式：

   /**
     * Format the request content with the form name
     * @param Request $request
     * @param $formName
     * @param null $content
     * @return Request
     */
     public function formatRequestWithForm(Request $request, $formName, $content = null)
     {
      if ($content === null) {
          $content = $request->getContent();
      }
      $contentArray = array($formName => json_decode($content, true));
      $request->attributes->add($contentArray);
      $request->request->add($contentArray);
      return $request;


     }  

Answer 4

您可以在 $scope 函数中构建 symfony 期望的对象，您可以使用 ng-click 绑定到表单的提交。所以：

<input type="submit" value="Save" /></div>

会变成

<input type="submit" value="Save" ng-click="submitForm()" /></div>

在您的控制器中，您将在 $scope 对象上添加一个函数

$scope.submitForm = function() {
  var user = [];
  user['username'] = $scope.formData.username;
  //etc
};