How to turn off form validation in Angular when clicking by button that shoulden't send form

Question

I have a form like this one:

<form name="myForm"> 
    <input id="myName" ng-model="myName" required/>
    ...
    <button ng-click="doSomePrepare()">Do some prepare</button>
    ...
    <button ng-click="saveForm()" ng-disabled="myForm.$invalid">Save</button>
</form>

I want validate form only when "Save" button clicked.

But if I'm click "Do some prepare", browser(chrome) ask me to fill "myName" input.

It's make me problems, cause in real world "Do some prepare" button may be a datepicker button or a dropdown or somethig like that.

P.S. I'm use Angular 1.2 version, but as far as I know this can be reprodused with version 1.0

JSfiddle: http://jsfiddle.net/se_panfilov/wQF4S/4/

Answer 1

Make your first button a non-form-submitting button:

<button type="button" ng-click="doSomePrepare()">Do some prepare</button>

You can test it here