如何在AngularJS中手動觸發表單提交？

我有一個我想嵌套的表單，但這是不可能的，因爲HTML不能接受嵌套表單。有沒有一種方法可以在AngularJS的第一個表單上手動調用提交（觸發驗證，如需要）？如何在AngularJS中手動觸發表單提交？

下面的代碼看起來像：

<div ng-conroller="ContactController"> 

    <form ng-submit="saveHeaderAndDetail()"> 
     <label for="Description">Description</label> 
     <input type="text" ng-model="Description" required/> 

     <input type="text" style="visibility:hidden" /> 
    </form> 

    <form ng-submit="addToDetail()"> 
    ... 
    </form> 

    <input type="button" 
     ng-click="what code could trigger the first form's submit?"/> 

</div>

順便說一句，兩種形式都包括在一個控制器是否有幫助

來源

2012-08-05 Hao

納克提交結合「提交」事件到一個元素..和AFAIK，這應該被連接到一個按鈕或輸入[類型=提交]或輸入[type = button] DOM節點，不應該嗎？ – abourget 2012-11-14 16:05:50

嘗試創建，捕捉事件的指令：http://jsfiddle.net/unWF3/

來源

2012-08-06 23:01:49

您不屬於表單的按鈕上的代碼會觸發提交，這對我來說是很好的新學習，+1。但它不會觸發該表單上的驗證。看看我的意思與驗證http://jsfiddle.net/unWF3/6/ – Hao 2012-08-07 03:57:36

是否有辦法做到這一點，而不包括jQuery？ – Allen 2015-02-25 11:14:50

你可以有與ng-form指令嵌套形式。這將是這樣的：

<form name="accountForm"> 
    <div data-ng-form="detailsForm"> 
    <input required name="name" data-ng-model="name"> 
    </div> 
    <div data-ng-form="contactsForm"> 
    <input required name="address" data-ng-model="address"> 
    </div> 
    <button type="submit">Save</button> 
</form>

這樣，當submit將被觸發爲accountForm它會驗證嵌套NG-形式也。

來源

2013-03-15 18:46:01

我已經在這裏回答過類似的問題AngularJS - How to trigger submit in a nested form

基本上，你可以通過射擊$validate事件

isFormValid = function($scope, ngForm) { 
    $scope.$broadcast('$validate'); 
    if(! ngForm.$invalid) { 
     return true; 
}

對於工作的代碼示例&一個小工具，方法是在顯示驗證信息有幫助觸發驗證，請參閱上述鏈接中的答案。

來源

2013-06-13 08:56:31 manikanta

如果你有一個帶有ng-submit，

我們總是可以直接使用javascript中的提交（）函數提交表單。

document.getElementById("myform").submit()

通過這種方式，我們可以先用angularjs驗證表單如果表單是有效的，那麼使用submit方法提交。

來源

2016-03-22 13:48:23 ETH

不能與ng-submit結合使用。 – 2016-04-01 09:39:28

有一種更簡單的方法可以做到這一點，您可以爲應用中的每個表單提供一個名稱，然後您就可以發送要觸發的表單的整個角度對象或執行任何操作你想要它。例如：

<div ng-conroller="ContactController"> 

    <form name="myFirstForm" ng-submit="saveHeaderAndDetail()"> 
     <label for="Description">Description</label> 
     <input type="text" ng-model="Description" required/> 

     <input type="text" style="visibility:hidden" /> 
    </form> 

    <form name="mySecondForm" ng-submit="addToDetail()"> 
    ... 
    </form> 

    <input type="button" 
     ng-click="saveHeaderAndDetail(myFirstForm)"/> 

</div>

然後在您的功能

saveHeaderAndDetail (myFirstForm) { 
myFirstForm.$submitted = true 
... 
}

來源

2016-05-02 20:27:07

如何在AngularJS中手動觸發表單提交？

回答

相關問題