如何在点击按钮发送表单时关闭Angular中的表单验证

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.

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

Answer 2

The default type attribute of a button tag is submit . Try setting the type to reset or to button to prevent the submit event from firing when you click it.

Working demo: http://jsfiddle.net/wQF4S/3/