Simple submit form using Angular

Question

I'm new to Angular, but very old with google.

I cannot find out how to submit this form using Angular, like how we do in jQuery.

<form>
   <input type="text" />
   <button type="button" class="saveDraft">Save Draft</button>
   <button type="submit">Submit</button>
<form>

I want to submit this form from a save draft button, but not a normal submit button.

jQuery we use

$('.saveDraft').click(function () {
    $('form').submit(); // this will submit form 
});

Answer 1

You could have ng-submit directive on form, When you click on submit button it call the method mentioned in ng-submit directive.

Markup

<form name="myForm" ng-submit="submit()">
   <input name="name" type="text" ng-model="name"/>
   <button>Save Draft</button>
   <button type="submit">Submit</button>
<form>

Read here for how form work in AngularJS?

Update 1

If you wanted to perform validation of button click but making its type as button itself would be some thing look like below using ng-click directive

Markup

<form name="myForm" ng-submit="submit()">
   <input name="name" type="text" ng-model="name"/>
   <button type="button" ng-click="manualSubmit()">Save Draft</button>
   <button type="submit">Submit</button>
<form>

Code

$scope.manualSubmit = function(){
   //do your the process of adding hidden fields.
   //then submit a form
   //if you don't want to submit on some cases then put it in condition block
   $('form').submit(); // this will submit form 
}

But technically I wouldn't prefer to do this approach as using jQuery with make problem Angular digest cycle.

If you really wanted to add hidden field inside a form, so I would keep them on form itself rather than adding them dynamically before submitting a form. And will use ng-submit directive.

For filling up those hidden values you could use ng-value directive with scope variable in it. What that ng-value directive will do is, it will update the those hidden field, suppose scopeVariable value is changed from controller will update the hidden field value.

<form name="myForm" ng-submit="submit()">
   <input name="name" type="text" ng-model="name"/>
   <input type="hidden" name="somehiddenfield" ng-value="scopeVariable"/>
   <button>Save Draft</button>
   <button type="submit">Submit</button>
<form>

Update 2

As per comment you wanted to submit a form manually using angular, for that you could have directive in place which will submit a form. You don't need ng-submit in such case.

Markup

<button type="button" my-submit="callback()">Save Draft</button>

Directive

app.directive('mySubmit', function(){
  return {
     restrict: 'A',
     link: function(scope, element, attrs){
        element.on('click', function(event){
            //do stuff before submitting
            element.parent.submit(); //manually submitting form using angular
            if(attrs.callback)
               scope.$eval(attrs.callback);
        })
     }
  }
})

Update 2 Plunkr