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]，但这根本不起作用。

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

Answer 1

您可以在$ 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
};

Answer 2

我认为你应该保持Angular形式逻辑。您应该使用ng-model来绑定数据。为此，您可以创建 Twig表单主题，为您的输入添加ng-model属性，看看this gist。

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

$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 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

您可以使用{'data-ng-model'：'formData [“user [username]”]'}。要发布formData，您应该通过jQuery.param（）传递它。

使用angularjs提交symfony2表单

4 个答案: