延遲表格提交（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");
    });
  });
}