使用angularjs提交symfony2表单
[英]submit a symfony2 form using angularjs
问题描述
我正在后端使用symfony2构建应用程序。 我正在考虑在前端使用AngularJS，但我仍想使用symfony形式。 我已经使用正确的模块和所有内容设置了表单，但是实际提交数据时会出现问题。
问题
当Symfony呈现表单时，它会将输入的“名称”属性设置为一个数组，例如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.user[username]这样的formData变量，但这根本不起作用。
那么，有没有一种方法可以在提交时使用输入的“名称”，或者采取某种措施使表单以正确的格式提交？ 任何帮助将是巨大的！
4 个解决方案
解决方案1
2 已采纳 2014-01-18 05:36:08
您可以在$ 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
};
解决方案2
2 2014-07-16 09:19:05
我认为您应该保持Angular表单逻辑。 您应该使用ng-model绑定数据。 为此，您可以创建一个Twig表单主题，以将ng-model属性添加到您的输入中，请看一下要点 。
然后可以将输入值传递给控制器中的$ scope.data var，如下所示：
$scope.var = {};
您应该使用本文第 109行提供的功能序列化数据，或者如果使用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);
});
}
解决方案3
0 2014-01-18 10:07:25
我使用服务器端代码解决它。 在处理请求和验证之前，我调用了我创建的以下函数来更改格式：
/**
* 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;
}
解决方案4
0 2014-02-10 23:55:01
您可以使用{'data-ng-model'：'formData [“ user [username]”]'}。 要发布formData，您应该通过jQuery.param（）传递它。
AngularJS块以symfony2形式提交按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.