在收到回电之前,如何阻止在Angular中提交表单?
我有以下几点:
<form method="post" action="http://example.com/external" ng-submit="submit()">
<input type="hidden" name="foo" value="{{bar}}" />
<input type="submit" />
</form>
在提交表单之前,我需要从本地API调用中获取{{bar}}
值(使用$http
),并在允许实际之前将其放在范围内要提交的表单(不使用$http
发布)。怎么办呢?
答案 0 :(得分:2)
Angular中的form指令将它包装在formController中并拦截它。您仍然可以运行异步代码,但是您需要引用DOM表单来提交它。我有一个解决方案的例子 - 基本上它设置了一个提交表单的按钮,异步设置隐藏字段,然后发布它。
以下是相关代码:
MyController = function ($scope, MyService) {
$scope.boo = "";
$scope.submit = function () {
MyService.getAsync().then(function(result) {
$scope.boo = result;
document.myForm.action = "http://example.com/";
document.myForm.submit();
});
};
};
如果您操作小提琴,您将看到隐藏的字段已填充:
http://jsfiddle.net/jeremylikness/T6B2X/
代码的“丑陋”部分是直接引用:
document.myForm
如果你想要清理它,你可以编写自己的指令,允许你在表单上放置一个属性并与服务交互来操纵它。即MyFormService,然后我可以做MyFormService.setAction(url)和MyFormService.submit() - 这将更清洁和可重用,但时间不允许我为你设置。
答案 1 :(得分:1)
作为ng-submit
州的文档:
此外,它会阻止默认操作(表单意味着 将请求发送到服务器并重新加载当前页面但是 仅当表单不包含动作属性时。
因此,删除该action属性并直接在作用域的submit()处理程序中处理它。 让你的http调用,然后成功处理程序手动提交表单。
答案 2 :(得分:0)
有许多可能性,但风险较小的是使用ng-switch。
如果不需要,ng-switch不会加载DOM。
<span ng-switch on="barNotEmpty">
<span ng-switch-when="true">
<form method="post" action="http://example.com/external" ng-submit="submit()">
<input type="hidden" name="foo" value="{{bar}}" />
</form>
</span>
<span ng-switch-default>
<form>
<input type="hidden" name="foo" value="{{bar}}" />
</form>
</span>
答案 3 :(得分:0)
如果不允许提交,你能否只使用提交按钮的onClick事件来调用返回false的函数?
i.e. onClick='return CheckIfFooPopulated();'
然后在该函数中返回false是foo尚未设置或如果可以提交则为true。
答案 4 :(得分:0)
问题是ng-submit
不适用于action
属性,如the docs中所述。
然后,您可以在控制器中的submit()
内执行任何操作。但是,我会将ng-model
用于表单输入字段,因为它可以让您更好地控制模型。
您可以使用此$scope.formModel
将输入字段绑定到范围。
您可以像这样实施submit
:
$scope.submit = function() {
$http.get("URL").success(function(data) {
$http.post("URL2", { model: $scope.formModel, bar: data.bar }).success(function() {
$location.path("/new-route");
});
});
}