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

Question

我有一個我希望嵌套的表單，但由於HTML無法接受嵌套表單，因此無法實現。 有沒有辦法可以在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>

順便說一下，如果有幫助，兩種形式都在一個控制器下

Answer 1

嘗試創建捕獲事件的指令：

 var app = angular.module('myApp', []); function MyCtrl($scope) { $scope.triggerSubmit = function() { $scope.$broadcast('myEvent'); console.log('broad'); }; $scope.onSubmitted = function() { alert('submitted!'); }; } app.directive('submitOn', function() { return { link: function(scope, elm, attrs) { scope.$on(attrs.submitOn, function() { //We can't trigger submit immediately, or we get $digest already in progress error :-[ (because ng-submit does an $apply of its own) setTimeout(function() { elm.trigger('submit'); }); }); } }; }); 

 <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script> <div ng-controller="MyCtrl"> <form submit-on="myEvent" ng-submit="onSubmitted()"> Form... </form> <hr /> <a class="btn" ng-click="triggerSubmit()">Submit</a> </div> 

原始來源：

http://jsfiddle.net/unWF3/

Answer 2

我在這里回答了一個類似的問題AngularJS - 如何以嵌套的形式觸發提交

基本上，您可以通過觸發$validate事件來觸發驗證

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

有關工作代碼示例和有助於顯示驗證消息的小實用程序方法，請參閱上面鏈接中的答案。

Answer 3

您可以使用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>

這樣，當accountForm觸發submit時，它也將驗證嵌套的ng-forms。

Answer 4

有一種更簡單的方法，您可以為您的應用程序中的每個表單命名，然后您將能夠發送您想要觸發的表單的整個角度對象或用它做任何你想做的事情。 例：

<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
...
}

Answer 5

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

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

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