Javascript 延迟提交表格（AngularJS）

在收到回调之前，如何防止以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

发布）。如何做到这一点？

有很多可能性是的，但风险较小的是使用ng开关

如果不需要，ng开关不加载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>

---

作为

ng提交的文档

状态：

此外，它还阻止了默认操作（对于表单意味着 将请求发送到服务器并重新加载当前页面）但是 仅当窗体不包含操作属性时

因此，删除该action属性，并直接在作用域上的submit（）处理程序中处理它。

---

进行http调用，然后在成功处理程序中手动提交表单。

如果不允许提交，是否可以使用提交按钮的onClick事件调用返回false的函数

i.e. onClick='return CheckIfFooPopulated();'

---

然后，在该函数中，return false表示foo尚未设置，如果可以提交，则为true。

问题在于

ng submit

不适用于

action

属性，如中所述

然后，您可以在控制器的

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");
    });
  });
}

---

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();
                });
            };            
        };

如果运行小提琴，您将看到隐藏字段已填充：

该准则的“丑陋”部分直接指：

document.myForm

---

如果您想清理这个问题，您可以编写自己的指令，允许您在表单上放置属性并与服务交互以操作它。例如MyFormService，然后我可以做MyFormService.setAction（url）和MyFormService.submit（）-这会更干净，更可重用，但时间不允许我为您设置

你有提交按钮吗？@Jayram是的，现在澄清。我需要将实际表单发布到指定的

操作

，因为我需要重定向用户。使用

$http

的帖子不会将其剪切。因此，之后您将

$location.path（“/new route”）

。我在回答中改变了它，它不起作用。请注意，我必须将用户发送到一个外部服务，该服务接受一篇文章，然后将用户重定向回原来的位置。在获得所需数据后，我需要一个好的老式表单提交。在表单中添加一个名称attr，如ie。然后在控制器$scope中。myForm是您的表单，您只需使用http将其发布到正确的URL。我不知道命名表单最终会出现在作用域中。无论如何，

FormController

没有提交自己的方法？（同样，我不能使用

$http

发布，因为我需要重定向浏览器）您可以在发布的成功处理程序中重定向。您可以将浏览器指向任何URL，或将其切换到应用程序本地的任何视图/路径。有没有我遗漏的问题？总的来说，发布表单和重新加载页面绝对不是一个好办法。在文件中：“由于表单在客户端应用程序中的作用不同于传统的往返应用程序，因此浏览器最好不要将表单提交转换为将数据发送到服务器的完整页面重新加载。相反，应该触发一些javascript逻辑，以特定于应用程序的方式处理表单提交。因此，Angular会阻止默认操作（表单提交到服务器），除非元素指定了操作属性。“好的。然后尝试普通的旧javascript。找到表单并在准备好后提交。document.getElementById（“myForm”）.submit（）；除了使用一些ajax基础设施之外，根本不需要使用angular。我需要进行服务器API调用（使用表单中的一些数据），以获取需要从外部发送的字段（“foo”）的值。通过阻止表单提交，我有效地永久停止了请求。