twitter-bootstrap AngularJS:表单触发器中的所有按钮都提交?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15687921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:45:57  来源:igfitidea点击:

AngularJS: All buttons inside form triggers submit?

twitter-bootstrapangularjs

提问by Index

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.

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

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.

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

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.

更新:我找到了一个使用指令的临时解决方法,该指令使用 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>

回答by steve

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

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

This questiongoes into detail as to what this does.

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