AngularJS: All buttons inside form triggers submit?

Question

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> 

Answer 1

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

This question goes into detail as to what this does.