Javascript 如何在 AngularJS 中手动触发表单提交？

How to manually trigger a form's submit in AngularJS?

提问by Hao

I have a form that I wanted be nested, but it is not possible since HTML can't accept nested form. Is there a way I can manually invoke the submit(triggers the validation, e.g. required) on first form on AngularJS?

我有一个想要嵌套的表单，但这是不可能的，因为 HTML 不能接受嵌套表单。有没有一种方法可以在 AngularJS 的第一个表单上手动调用提交（触发验证，例如需要）？

Here's how the code looks like:

代码如下所示：

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

Btw, both forms are under one controller if that helps

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

回答by Andrew Joslin

Try creating a directive that catches an event:

尝试创建一个捕获事件的指令：

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>

Original source:

原始来源：

http://jsfiddle.net/unWF3/

回答by manikanta

I've answered a similar question here AngularJS - How to trigger submit in a nested form

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

Basically, you can trigger validation by firing $validateevent

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

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

For working code example & a small utility method which is helpful in showing validation messages, see answer in the above link.

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

回答by Dmitry Evseev

You can have nested forms with ng-formdirective. It will be like:

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

That way when submitwill be triggered for the accountFormit will validate nested ng-forms also.

这样，什么时候submit会被触发，accountForm它也会验证嵌套的 ng-forms。

回答by Juan Delgadillo

There's an easier way to do that, You can give a name for each form that you have in your app, then you'll be able to send the entire angular object of the form that you want to trigger or do whatever you want with it. Example:

有一种更简单的方法可以做到这一点，您可以为应用程序中的每个表单命名，然后您就可以发送要触发的表单的整个角度对象或对其进行任何操作. 例子：

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

Then in your function

然后在你的函数中

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

回答by ETH

We can always submit a form directly using the submit () function from javascript.

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

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

In this way, we can validate the form using angularjs first and if the form is valid then submit it using the submit method.

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