AngularJS 中的嵌套表单答案

【问题标题】：Nested forms in AngularJSAngularJS 中的嵌套表单
【发布时间】：2016-06-28 15:53:44
【问题描述】：

您可以在此处找到演示问题的 Plunker：Plunker

我想在 AngularJS 中使用嵌套表单。要做到这一点，ng-form 似乎是可行的方法，我尝试了以下方法：

<form novalidate ng-submit="ctrl.form1()">
    <button type=submit>Form1</button>
    <ng-form novalidate ng-submit="ctrl.form2()">
        <button type=submit>Form2</button>  
    </ng-form>
</form>

虽然我希望内部提交执行内部表单的提交操作，但每次单击任一按钮时都会调用方法 form1()。

为什么会这样，我怎样才能达到预期的效果？

【问题讨论】：

标签： javascript angularjs forms

【解决方案1】：

您可以使用以下两种方法之一来指定提交表单时应调用的 javascript 方法： * ngSubmit 指令在表单元素上 * ngClick 指令在第一个按钮或类型为 submit (input[type=submit]) 的输入字段上

访问Angular Forms

    <form novalidate>
        <button type=submit ng-click="ctrl.form1()">Form1</button>
            <ng-form novalidate >
               <button type=submit ng-click="ctrl.form2()">Form2</button>  
            </ng-form>
    </form>

请参阅工作 plunker here

【讨论】：