1

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

我有这些方面的东西：

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

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

4

5 回答 5

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/

代码的“丑陋”部分是对以下内容的直接引用：

文档.myForm

如果你想清理它，你可以编写你自己的指令，允许你在表单上放置一个属性并与服务交互来操作它。即 MyFormService，然后我可以执行 MyFormService.setAction(url) 和 MyFormService.submit() - 这会更清洁和可重用，但时间不允许我为您设置。

于 2014-01-23T14:41:41.620 回答
1

作为ng-submit状态的文档：

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

因此，删除该操作属性并直接在范围上的 submit() 处理程序中自己处理它。进行您的 http 调用，然后在成功处理程序中手动提交表单。

于 2014-01-23T12:37:32.407 回答
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>

于 2014-01-23T12:27:29.877 回答
0

你不能只使用提交按钮的 onClick 事件来调用一个在不允许提交时返回 false 的函数吗？

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

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

于 2014-01-23T12:39:01.457 回答
0

问题是它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");
    });
  });
}
于 2014-01-23T12:39:09.360 回答