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

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上手动调用第一表单上的submit(触发验证，例如required) ?

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

顺便说一句，如果有帮助的话，两个表单都在一个控制器下

5 个解决方案

#1

Try creating a directive that catches an event: http://jsfiddle.net/unWF3/

尝试创建一个捕获事件的指令:http://jsfiddle.net/unWF3/

#2

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

我在这里回答了一个类似的问题AngularJS——如何在嵌套表单中触发submit

Basically, you can trigger validation by firing $validate event

基本上，您可以通过触发$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.

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

#3

You can have nested forms with ng-form directive. 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 submit will be triggered for the accountForm it will validate nested ng-forms also.

这样，当为accountForm触发submit时，它也将验证嵌套的ng表单。

#4

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

#5

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方法提交表单。

#1