How to trigger form submit programmatically in AngularJS?
Solution 1
Just use event .triggerHandler('submit') on form element.
myApp.directive("extSubmit", ['$timeout',function($timeout){
return {
link: function($scope, $el, $attr) {
$scope.$on('makeSubmit', function(event, data){
if(data.formName === $attr.name) {
$timeout(function() {
$el.triggerHandler('submit'); //<<< This is Important
//equivalent with native event
//$el[0].dispatchEvent(new Event('submit'))
}, 0, false);
}
})
}
};
}]);
Look at http://jsfiddle.net/84bodm5p/
Solution 2
app.directive("form", function(){
return {
require: 'form',
restrict: 'E',
link: function(scope, elem, attrs, form) {
form.doSubmit = function() {
form.$setSubmitted();
return scope.$eval(attrs.ngSubmit);
};
}
};
});
Html:
<form name="myForm" ng-submit="$ctrl.submit()" novalidate>
Then call in controller
$scope.myForm.doSubmit();
Related videos on Youtube
Pavel Voronin
Nice videos worth watching: What were they thinking? Language design choices that seem wrong, until they don’t - Bill Wagner Seven Ineffective Coding Habits of Many Programmers - Kevlin Henney Code that fits your brain - Adam Tornhill Clean Code: A Reader-Centered Approach - Matthew Renze SOLID Deconstruction - Kevlin Henney Self-documenting Code: A Mob Powered Vocabulary Lesson - Cory House DDD, F# and Types
Updated on September 14, 2022Comments
-
Pavel Voronin over 1 year
From Angular's documentation it follows that ngSubmit is a preferred way of submitting a form. All pending operations are immediately finished and
$submitted
flag is set as well. Whereas listening tongClick
event does not have the same effect.Now I need to submit a form with hotkeys having all the goodies of
ngSubmit
approach. Hence I need some way to trigger standard submit workflow.I tried
submit()
on DOM form and it worked, but angular's form object attached to scope contains no references to DOM form, thus I need to access it through jqLite:var frm = angular.element('#frmId'); frm.submit();
I didn't like this solution for accessing DOM in controller code so I created a directive:
function wuSubmit() { return { require: 'form', restrict: 'A', link: function(scope, element, attributes) { var scope = element.scope(); if (attributes.name && scope[attributes.name]) { scope[attributes.name].$submit = function() { element[0].submit(); }; } } }; }
which extends form object with
$submit
method.Both variants do not work for yet unknown reason.
form.submit()
tries to send data, default action is not prevented.
Update 1
It turns out that Angular listens to click events of elements havingtype="input"
.
Eventually I decided to trigger click event for that element:wuSubmit.$inject = ['$timeout']; function wuSubmit($timeout) { return { require: 'form', restrict: 'A', link: function (scope, element, attributes) { var submitElement = element.find('[type="submit"]').first(); if (attributes.name && scope[attributes.name]) { scope[attributes.name].$submit = submit; } function submit() { $timeout(function() { submitElement.trigger('click'); }); } } }; }
Is there any out of the box solution for this functionality?
-
Pavel Voronin over 9 yearsnope.. the problem is not in calling the same handler. The problem is in making angular to perform all operations like it does when real submit happens.
-
Shashank Agrawal over 9 yearsDo you mean performing validations & all by saying "Performing all operations"?
-
georgeawg over 5 yearsThis is a novel solution, monkey-patch the ngFormController to add a
doSubmit
method.