Angular js form submits when it shouldn't

Question

I have an AngularJS form which looks like this:

<form ng-submit="vm.update(vm.model)"> 

     .. fields

     <button ng-click="vm.addCluster()">Add</button>

     .. more fields

     <input type="submit" value="Save" /> 

</form>

When I click submit it works as expected - update() method is called. When I click the button it calls addCluster() but after that the form gets submitted and update() is called automatically.

Why does it do It and how can I prevent this?

Answer 1

The default action of a button(with no type specified) in a form is to submit it, you can set the type of the button to button to change this behavior

<button type="button" ng-click="vm.addCluster()">Add</button>

Answer 2

I believe you can give the button an extra attribute like so

<button type="button">Your button</button>

The type="button" should prevent the unwanted form submission.