Angularjs: Call The Ng-submit Event Outside The Form

June 22, 2024 Post a Comment

I'm a fish in AngularJS and I have this scenario. In normal ways Angular

Solution 1:

Use HTML5's form attribute, here's a sample:

angular.module('app', [])

.controller('MyCtrl', ['$scope', function($scope) {
  $scope.submitted = false;
  
  $scope.confirm = function() {
    $scope.submitted = true;
  };
}]);

form {
  padding:5px;
  border: 1px solid black
}

<!DOCTYPE html><htmlng-app="app"><head><scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script><metacharset="utf-8"><title>JS Bin</title></head><bodyng-controller="MyCtrl"><formid="myform"ng-submit="confirm()"><labelfor="myinput">My Input</label><inputtype="text"id="myinput"name="myinput"></form><br><inputtype="submit"value="Submit"form="myform"><png-show="submitted">
    The form was submitted
  </p></body></html>

Solution 2:

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/

<divng-app><divng-controller="Ctrl"><formng-submit="submit()">Enter text and hit enter:
            <inputtype="text"ng-model="text"name="text" /><inputtype="submit"id="submit"value="Submit" /><pre>list={{list}}</pre></form><buttonng-click="submit()">Submit 2</button></div></div>

with js:

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

Solution 3:

This is by far the cleanest solution I found, all credits go to @Offereins https://stackoverflow.com/a/23456905/3819736

<formng-submit="vm.submit()"><inputtype="text"name="name" /><inputtype="submit"id="submit-form"class="hidden" /></form><labelfor="submit-form"><buttontype="submit">submit</button></label>

This method doesn't require any additional controller JS or other jQuery tweaks.

Solution 4:

Angular 2

For anyone looking to achieve the same with Angular 2, ngForm exposes an event emitter you can use.

https://angular.io/api/forms/NgForm

<formrole="form" (ngSubmit)="onSubmit()" #myForm="ngForm"><divclass="form-group"><labelfor="name">Name</label><inputautofocustype="text"ngControl="name" #name="ngForm"class="form-control"id="name"placeholder="Name"><div [hidden]="name.valid || name.pristine"class="alert alert-danger">
        Name is required
    </div></div></form><buttontype="submit"class="btn btn-primary" (click)="myForm.ngSubmit.emit()">Add</button>

You can also perform the same emit from inside your component ts/js file

Solution 5:

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

<formng-submit="submit()"name="jForm"id="jForm"onsubmit="event.returnValue = false; return false;"><inputtype="text"class="form-control"placeholder="try to hit the enter key in here" /><divclass="btn btn-default"id="tap">
      Tap me
    </div><divui-submit=""class="btn btn-primary">Submit form</div></form><ui-submitformclass="btn btn-primary"formsubmitfunction="submit()">Submit form 2</ui-submitform><buttononclick="$('#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 fieldsreturn {
     restrict: 'E',
     link: function(scope, element, attrs)
     {
        element.onTrigger(function()
        {
          //scope.$apply(attrs.formsubmitfunction); 
            scope.$eval(attrs.formsubmitfunction);
        });
     }
 };
});

Html5 Academy