CODEWITHSUNDEEP
javascriptformsvalidationangularjs
S Panfilov
S Panfilov

Reputation: 17591

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

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/

Upvotes: 4

Views: 3436

Answers (2)

JB Nizet
JB Nizet

Reputation: 692181

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

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

You can test it here

Upvotes: 10

musically_ut
musically_ut

Reputation: 34288

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/

Upvotes: 2

Related Questions