ng-submit called twice in angular form

Question

I have gone through several questions regarding this issue, but none solved my issue

I am using a form in which two submit type button calling same function. One button is send an extra variable with it on ng-click. when I submit my function is being called twice.

I am using an approach told in the second answer of this question (mostly voted)

I have not included controller as ng-controller in HTML

<form ng-submit="SaveContent(Form)">
    <button type="submit">Save</button>
    <button type="submit" ng-click="Data.IsSent = true">Save & Send</button>
</form>

How to handle this issue ?

Answer 1

The angular form docs specifies it as

if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)

I inserted your code in below example and it behaves exactly like it is specified in the docs and only one submit (the first) is executed when submitting the form

angular.module("app",[]).controller("myCtrl",function($scope){

$scope.Data ={};
$scope.Data.IsSent = false;
$scope.SaveContent = function(form){
if($scope.Data.IsSent){
  alert('submitted- and ngclick is invoked');
  }else{
  alert('submitted');
  }
  $scope.Data.IsSent = false;
};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">

<form ng-submit="SaveContent(Form)">
    <input type="text" name="text1"/>
    <button type="submit">Save</button>
    <button type="submit" ng-click="Data.IsSent = true">Save & Send</button>
</form>

</div>