How to trigger form submit programmatically in AngularJS?

Question

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 to ngClick 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 having type="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?

How are you binding normal form submission in your form in HTML? — Shashank Agrawal
– Shashank Agrawal, Commented Dec 29, 2014 at 13:55

non4me · Accepted Answer · 2016-06-26 12:28:06Z

4

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/

answered Jun 26, 2016 at 12:28

non4me

3813 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

georgeawg · Accepted Answer · 2018-08-18 14:18:04Z

1

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();

edited Aug 18, 2018 at 14:18

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Feb 19, 2017 at 16:02

nguyên

5,3865 gold badges45 silver badges45 bronze badges

1 Comment

georgeawg Over a year ago

This is a novel solution, monkey-patch the ngFormController to add a doSubmit method.

Shashank Agrawal · Accepted Answer · 2014-12-29 14:00:31Z

0

You can modify your directive code a bit like:

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() {
                    // Parse the handler of submit & execute that.
                    var fn = $parse(attr.ngSubmit);
                    $scope.$apply(function() {
                        fn($scope, {$event: e});
                    });
                };
            }
        }
    };
}

Here you don't have to add wu-submit everywhere. ng-submit will work.

Hope this helps!

answered Dec 29, 2014 at 14:00

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

2 Comments

Pavel Voronin Over a year ago

nope.. 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 a year ago

Do you mean performing validations & all by saying "Performing all operations"?

Collectives™ on Stack Overflow

How to trigger form submit programmatically in AngularJS?

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related