ssxdots
ssxdots

Reputation: 388

AngularJS - how to use ng-click without submitting the form?

I have a form that has both ng-click and ng-submit.

ng-submit is meant for the submission, while ng-click calls a separate function like upload, etc.

How do I make sure that ng-click does not accidentally submits the form?

thank you!

Upvotes: 19

Views: 21464

Answers (1)

meriadec
meriadec

Reputation: 2983

ngClick does not submit the form.

Sometimes, you can have problems because you have two button elements in your form, and they both submit it. To avoid that, specify the type "button" on it. Example :

function demo ($scope) {
  
  $scope.doSubmit = function () {
    alert('I submit');
  };
  
  $scope.doClick = function () {
    alert('I click');
  };
  
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="demo">
  
  <form ng-submit="doSubmit()">
    <button type="button" ng-click="doClick()">click</button>
    <button type="submit">submit</button>
  </form>
  
</div>

Upvotes: 53

Related Questions