如何在 AngularJS 中手动触发表单的提交？答案

【问题标题】：How to manually trigger a form's submit in AngularJS?如何在 AngularJS 中手动触发表单的提交？
【发布时间】：2012-08-05 13:17:20
【问题描述】：

我有一个我想要嵌套的表单，但这是不可能的，因为 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>

顺便说一句，如果有帮助的话，两种形式都在一个控制器之下

【问题讨论】：

ng-submit 将 'submit' 事件绑定到一个元素.. 和 AFAIK，这应该附加到一个按钮或 input[type=submit] 或 input[type=button] DOM 节点，应该不是吗？

标签： javascript angularjs

【解决方案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/

【讨论】：

您在不属于表单的按钮上的代码触发了提交，这很好，对我来说是新的学习，+1。但它不会触发对该表单的验证。看看我对验证的意思jsfiddle.net/unWF3/6
有没有办法在不包括 jquery 的情况下做到这一点？

【解决方案2】：

我在这里AngularJS - How to trigger submit in a nested form回答了一个类似的问题

基本上，您可以通过触发$validate 事件来触发验证

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

有关工作代码示例和有助于显示验证消息的小型实用方法，请参阅上面链接中的答案。

【讨论】：

如果您有一个带有 ng-submit 的表单、一个

【解决方案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>

这样，当submit 为accountForm 触发时，它也会验证嵌套的ng-forms。

【讨论】：

【解决方案4】：

有一种更简单的方法可以做到这一点，您可以为应用中的每个表单命名，然后您就可以发送您想要触发的表单的整个 angular 对象或执行任何您想要的操作想用它。示例：

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

【讨论】：

【解决方案5】：

我们总是可以直接使用 submit 提交表单 () 来自 javascript 的函数。

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

这样，我们可以先使用angularjs验证表单，如果表单有效则使用submit方法提交。

【讨论】：