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

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

Answer 2

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

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

来触发验证

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

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

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>

这样，当submit触发accountForm时，它也会验证嵌套的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的（）函数。

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

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

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

5 个答案: