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
});
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);
})
}
}
})
type attribute on button by default its considered as submit, however when you click on Save Draft it will submit out the for with the input fields
submit() is going to do..I don't seem any action attribute on your form so that wouldn't make any difference..basically it will only fire submit event$scope.draft = 1?Here you have an example:
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
And documentation:
you just replace you code with this
<form name="myForm" ng-submit="submit()" action=" name of other page" autocomplete="on">`
<input name="name" type="text" ng-model="name"/>
<button onClick="draft(this.form)">Save Draft</button>
<button type="submit" name="submit">Submit</button>
clickfunction?