AngularJS:表单内的所有按钮触发提交?

Posted

技术标签:

【中文标题】AngularJS:表单内的所有按钮触发提交?【英文标题】:AngularJS: All buttons inside form triggers submit? 【发布时间】:2013-03-19 06:00:05 【问题描述】:

如果文档中包含此内容,我提前道歉,但我似乎无法找到它。

我有一个非常简单的表单,它使用了几个按钮,因为我正在使用 twitter bootstrap。问题是单击表单中的任何按钮似乎都会触发提交事件到 Angular:在我的表单中有几个输入字段,我在其中使用“require”属性,因此单击任何按钮都会打开一个对话框,说明该字段是必需的。这一切都很好,除了我只希望在用户单击实际提交按钮时进行验证。

我尝试将 ng-submit 设置为一个到目前为止只返回 false 的函数,但这似乎没有任何效果。

更新:我找到了一个临时解决方法,它使用了一个使用 event.preventDefault() 的指令。但这似乎有点过分,也意味着我必须将它附加到每个按钮上。

<div class="row-fluid">
    <div class="span12">
        <form ng-submit="onSubmit()" class="form-horizontal">
            <div class="row-fluid">
                <div class="span12">
                    <div class="katana-technician-form">
                        <div class="control-group">
                            <label class="control-label">Tekniker
                                <div class="controls">
                                    <div class="input-append">
                                        <input type="text" class="span2" />
                                        <div class="btn-group">
                                            <!-- Triggers onSubmit-->
                                            <button data-toggle="dropdown" class="btn dropdown-toggle">Velg<span class="caret"></span>

                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>Kake</li>
                                                <li>Bake</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <!-- Triggers onSubmit-->
                    <button type="submit"></button>
                </div>
            </div>
    </div>
    </form>
</div>
</div>

【问题讨论】:

【参考方案1】:

您应该尝试在按钮上设置type="button"

This question 详细说明了它的作用。

【讨论】:

把我的头发拉在这个上面一个多小时......谢谢! 我一直想知道 type="button" 需要什么,现在我知道了为什么。谢谢!

以上是关于AngularJS:表单内的所有按钮触发提交?的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Jquery 表单提交功能更改为 AngularJS 功能?

AngularJs:为啥我们总是禁用表单提交按钮?

当表单使用 AngularJS 无效时禁用提交按钮

如果图像大小很大,则禁用 angularjs 表单提交按钮

angularjs解决方案之 Form表单中按钮提交

触发 Angular 表单提交中所有字段的验证