延迟表格提交（AngularJS）

Question

在收到回调之前，如何防止在Angular中提交表单？

我遵循以下原则：

<form method="post" action="http://example.com/external" ng-submit="submit()">
  <input type="hidden" name="foo" value="{{bar}}" />
  <input type="submit" />
</form>

在提交表单之前，我需要从本地API调用（使用$http ）获取{{bar}}值，并将其放置在作用域中，然后才允许提交实际表单（而不是使用$http张贴）。 如何才能做到这一点？

Answer 1

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（）-这样会更清洁和可重用，但是时间不允许我为您设置。

Answer 2

作为ng-submit状态的文档：

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

因此，请删除该动作属性，并直接在范围的commit（）处理程序中直接处理它。 进行您的http调用，然后在成功处理程序中手动提交表单。

Answer 3

有很多可能性，但是使用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>

Answer 4

您是否不仅可以使用提交按钮的onClick事件来调用一个函数，如果不允许提交，该函数将返回false？

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

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

Answer 5

问题是ng-submit不适用于action属性，如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");
    });
  });
}