AngularJS: Call the ng-submit event outside the form

Question

I\'m a fish in AngularJS and I have this scenario.

    

submit

        

Answer 1

If you are looking a handle of submitted state of form: In function ng-click just add vm.formName.$setSubmitted();

ng-click="vm.formName.$setSubmitted(); vm.submit()"

Answer 2

Here is my test code. The controller who has the login method is already called!

<form ng-submit="login()" id="form-test" name="formTest">
    <input type="text" name="username">
    <br>
    <input type="password" name="userpass">
    <br>

    <!-- works -->
    <input type="submit" value="submit inside" id="test">
</form>

<!-- change the path from /#/login to /?username=aaa&userpass=aaa#/login and reloads the page-->
<button type="submit" onclick="$('#form-test').submit();">submit outside (jquery)</button> 

<!-- doesn't work -->
<button type="submit" ng-click="formTest.submit()">submit outside (ng-click)</button> 

Answer 3

Please, surround your code with a ng-controller, and use ng-click on buttons out of scope of <form>.

I make a sample on jsfiddle for you... try it:

http://jsfiddle.net/xKkvj/2/

<div ng-app>
    <div ng-controller="Ctrl">
        <form ng-submit="submit()">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>
        <button ng-click="submit()">Submit 2</button>
    </div>
</div>

with js:

function Ctrl($scope) {
    $scope.list = [];
    $scope.text = 'hello';
    $scope.submit = function () {
        if ($scope.text) {
            $scope.list.push($scope.text);
            $scope.text = '';
        }
    };
}

Answer 4

In Angular you don't submit forms (well, at least in the angular way). You just need a function that will do what you want to do when you complete the form.

Just call that function in your <button> and you're ready to go.

Example: plunker

Answer 5

All great answers, but the uber-solution, with all your options laid out: http://plnkr.co/edit/VWH1gVXjP2W9T9esnVZP?p=preview

  <form ng-submit="submit()" name="jForm" id="jForm" onsubmit="event.returnValue = false; return false;">
    <input type="text" class="form-control" placeholder="try to hit the enter key in here" />
    <div class="btn btn-default" id="tap">
      Tap me
    </div>

    <div ui-submit="" class="btn btn-primary">Submit form</div>
  </form>
  <ui-submitform class="btn btn-primary" formsubmitfunction="submit()">Submit form 2</ui-submitform>
  <button onclick="$('#jForm').submit()">jquery Submit</button>

and extending @m-k's and combing ideas from @joaozito-polo:

app.directive('uiSubmitform', function()
{
    // need this to make sure that you can submit your form by simply pressing the enter key in one of the input fields
    return {
     restrict: 'E',
     link: function(scope, element, attrs)
     {
        element.onTrigger(function()
        {
          //scope.$apply(attrs.formsubmitfunction); 
            scope.$eval(attrs.formsubmitfunction);
        });
     }
 };
});

Answer 6

Short answer Look at http://jsfiddle.net/84bodm5p/

---

Easiest way for me create special directive for external submission.

Important only use right event .triggerHandler('submit') on form element

$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 my answer here How to trigger form submit programmatically in AngularJS?