Can I trigger a form submit from a controller?

Question

I'd like to do a traditional form submit from within a controller. The scenario is that I want to hit a route on my web server and redirect to its response, which I can do with a regular form in HTML, but I also want to do some validation on its fields when the submit button is pressed, and if the validation fails, I don't want to do the route.

I'm aware of ng-valid, but I only want the validation to take place when the button is hit.

Is there a way to conditionally do a form submit from within a controller?

score 34 · Answer 1 · answered Aug 03 '14 at 08:04

You can add submit method to a FormController. I did so:

<form ng-form-commit action="/" name='payForm' method="post" target="_top">
    <input type="hidden" name="currency_code" value="USD">
    <button type='button' ng-click='save(payForm)'>buy</button>
</form>

.directive("ngFormCommit", [function(){
    return {
        require:"form",
        link: function($scope, $el, $attr, $form) {
            $form.commit = function() {
                $el[0].submit();
            };
        }
    };
}])

.controller("AwesomeCtrl", ["$scope", function($scope){
   $scope.save = function($form) {
     if ($form.$valid) {
         $form.commit();
     }
   };
}])

jpmorin · Answer 2 · 2013-04-15T00:06:30.120

8

Did you try to use the ng-submit directive on your form? You may return true/false after your validation.

Controller

app.controller('MainCtrl', ['$location', function($scope, $location) {
  $scope.submit = function(user) {
    var isvalid = true;
    // validation 
    if (isvalid) {
        $http.get('api/check_something', {}).then(function(result) {
            $location.path(result.data);
        });
        return true;
    }
    return false; //failed
  }
});

Html (you must not have an action attribute)

<form name="formuser" ng-submit="submit(user)">
    <input type="text" ng-model="user.firstname" />
    <input type="text" ng-model="user.lastname" />
    <button type="submit">Submit</button>
</form>

edited Apr 15 '13 at 00:06

answered Apr 14 '13 at 19:57

jpmorin

6,008
2
28
39

2

I had that thought, but I needed to specify an action. – Mike Pateras Apr 14 '13 at 23:30
1

This is opposite of what OP asks. This adds a sort of a 'hook' before html form submission is triggered. OP asks about how to trigger that form submission from angular controller, not how to add a hook to already running submission. – ZurabWeb Dec 07 '16 at 20:36

score 3 · Answer 3 · edited May 23 '17 at 12:18

This is 'not the Angular' way to do it but you can submit the form using vanilla javascript. For example you can give the form an id and do:

document.getElementById('myForm').submit()

or if you have a submit button you can click it:

document.getElementById('myForm-submit').click()

I found that the first one did not keep the data bindings (I was using it on a project with a JQuery widget that had no Angular alternative), but the second one kept the bindings. I assume this has to do with how the JQuery widget was written.

You can see more about triggering forms with vanilla JS here:

How to submit a form using javascript?

this will not trigger ng-submit – Harry Bosh Aug 08 '18 at 06:56 — Harry Bosh, Aug 08 '18 at 06:56

score 1 · Answer 4 · edited Feb 18 '19 at 09:58

1

$scope.payForm.$setSubmitted();

Sets the form to its $submitted state. This will also set $submitted on all child and parent forms of the form

https://docs.angularjs.org/api/ng/type/form.FormController#$setSubmitted

edited Feb 18 '19 at 09:58

c24w

7,421
7
39
47

answered Jul 23 '18 at 12:58

Pankov Oleksandr

11
1

score 0 · Answer 5 · edited May 23 '17 at 12:26

0

How about just out-right disabling the submit button until the form is valid:

<button type="submit" ng-disabled="form.$invalid">Submit</button>

Take a look at this similar question I had: AngularJS Form Validation with Directives - "myform.$valid" not quite right for me

edited May 23 '17 at 12:26

Community

1
1

answered Apr 15 '13 at 16:41

Thom Porter

2,604
2
19
23

score 0 · Answer 6 · edited Nov 25 '16 at 12:32

Expanding from @ReklatsMasters's answer, if you want to change a value before submitting the form, you could do like so...

<form ng-form-commit action="/" name='payForm' method="post" target="_top">
    <input type="hidden" id="currency_code" name="currency_code" value="USD">
    <button type='button' ng-click='save('GBP', payForm)'>buy</button>
</form>

.directive("ngFormCommit", [function(){
    return {
        require:"form",
        link: function($scope, $el, $attr, $form) {
            $form.commit = function($newCurrency) {
                $el[0].querySelector('#currency_code').value = $newCurrency;
                $el[0].submit();
            };
        }
    };
}])

.controller("AwesomeCtrl", ["$scope", function($scope){
   $scope.save = function($newCurrency, $form) {
     if ($form.$valid) {
         $form.commit($newCurrency);
     }
   };
}])

Can I trigger a form submit from a controller?

6 Answers6

Linked