AngularJS:表单触发器中的所有按钮都提交? [英] AngularJS: All buttons inside form triggers submit?

查看：35
本文介绍了AngularJS:表单触发器中的所有按钮都提交?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果文档中包含此内容，我提前道歉，但我似乎找不到它.

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

我已经尝试将 ng-submit 设置为到目前为止只返回 false 的函数，但这似乎没有任何效果.

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

<div class="span12"><form ng-submit="onSubmit()" class="form-horizo​​ntal"><div class="row-fluid"><div class="span12"><div class="katana-technician-form"><div class="control-group"><label class="control-label">Tekniker<div class="控件"><div class="input-append"><input type="text" class="span2"/><div class="btn-group"><!-- 触发 onSubmit--><button data-toggle="dropdown" class="btn dropdown-toggle">Velg<span class="caret"></span><ul class="下拉菜单"><li>Kake</li><li>烘烤</li>

<div class="row-fluid"><div class="span12"><!-- 触发 onSubmit--><button type="submit"></button>

</表单>

解决方案

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

这个问题详细说明了它的作用.

I apologize in advance if this is covered in the docs, but I can't seem to find it.

I have a pretty straightforward form which uses several buttons as I'm using twitter bootstrap. The problem is that clicking any of the buttons in the form seems to trigger a submit event to angular: In my form there are several input fields in which I use the "require" attribute and so clicking any button opens a dialog saying the field is required. This is all well and good, except I only want the validation to take place when the user clicks the actual submit button.

I have tried setting the ng-submit to a function which so far only returns false, but this did not seem to have any effect.

Update: I've found a temporary workaround using a directive which uses event.preventDefault(). However this seems a bit excessive and also means I have to attach it to every button.

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

解决方案

You should try setting type="button" on the buttons.

This question goes into detail as to what this does.

这篇关于AngularJS:表单触发器中的所有按钮都提交?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆