延遲表單提交（AngularJS）

我如何才能防止在Angular中提交表單直到我收到回調？延遲表單提交（AngularJS）

我有東西沿着這些路線：

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

提交表單之前，我需要從（使用$http）本地API調用得到{{bar}}值，並將其放置在範圍允許前實際提交表單（未使用$http發佈）。如何才能做到這一點？

來源

2014-01-23 Vegard Larsen

你有提交按鈕嗎？ –

@Jayram是的，現在澄清。 –

在角的形式指令將它包裝在一個表單控制器和攔截它。您仍然可以運行異步代碼，但您需要引用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（） - 這將更清潔和可重用，但時間不會允許我爲你設置。

來源

2014-01-23 14:41:41

有很多的可能性，但風險較小的是使用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-23 12:27:29 bdavidxyz

作爲文檔爲ng-submit狀態：

此外，它防止了默認操作（對於形式意味着發送請求到服務器，並重新加載當前頁），但只有如果表單不包含操作屬性。

因此，刪除該操作屬性並直接在範圍的submit（）處理函數中處理它。讓你的http調用，然後成功處理程序手動提交表單。

來源

2014-01-23 12:37:32 stride

如何從控制器手動提交表格？ –

添加一個名稱attr以形成像ie。

我不知道命名錶格在範圍內。總之，「FormController」沒有提交自己的方法？（再次，我不能使用'$ http'來POST，因爲我需要重定向瀏覽器） –

如果提交不被允許，你可以不使用提交按鈕的onClick事件來調用返回false的函數嗎？

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

然後在那個函數中返回false是foo還沒有設置，或者如果它沒有提交就返回true。

來源

2014-01-23 12:39:01 Nibbo

我需要做一個服務器API調用（從表單中的一些數據），以獲得我需要發送到外部（「foo」）的字段的值。通過阻止表單提交，我有效地阻止了好的請求。 –

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

來源

2014-01-23 12:39:09

我需要將實際表單發佈到指定的'action'，因爲我需要重定向用戶。使用'$ http'的POST不會削減它。 –

所以你會''location.path（「/ new-route」）'。我在回答中改變了它。 –

這不起作用。請注意，我必須將用戶發送到接受單個POST的外部服務，然後將用戶重定向回來。在獲得我需要的數據後，我需要一個很好的老式**表單提交**。 –

延遲表單提交（AngularJS）

回答

相關問題