AngularJS: Call the ng-submit event outside the form
Question
I'm a fish in AngularJS and I have this scenario.
<form>
<input type="text">
</form>
<button type="submit">submit</button>
In normal ways AngularJS provides the ng-submit directive to work as an attribute in the form but I need to call it outside.
So, someone has experienced the same problem? If yes, what you did?
10 answers
solution1
51 2015-02-10 12:57:10
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> <html ng-app="app"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body ng-controller="MyCtrl"> <form id="myform" ng-submit="confirm()"> <label for="myinput">My Input</label> <input type="text" id="myinput" name="myinput"> </form> <br> <input type="submit" value="Submit" form="myform"> <p ng-show="submitted"> The form was submitted </p> </body> </html>
solution2
17 ACCPTED 2013-09-04 13:06:03
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:
<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 = '';
}
};
}
solution3
9 2015-06-23 09:16:55
This is by far the cleanest solution I found, all credits go to @Offereins https://stackoverflow.com/a/23456905/3819736
<form ng-submit="vm.submit()">
<input type="text" name="name" />
<input type="submit" id="submit-form" class="hidden" />
</form>
<label for="submit-form">
<button type="submit">submit</button>
</label>
This method doesn't require any additional controller JS or other jQuery tweaks.
solution4
5 2016-05-14 12:49:25
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
<form role="form" (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input autofocus type="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>
<button type="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
solution5
2 2013-09-03 15:35:07
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>
solution6
2 2015-02-12 07:56:33
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 @mk'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);
});
}
};
});
solution7
1 2016-06-26 12:50:22
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?
solution8
1 2017-10-10 12:59:18
如果你正在寻找提交状态的句柄：在函数ng-click中只需添加vm.formName。$ setSubmitted（）;
ng-click="vm.formName.$setSubmitted(); vm.submit()"
solution9
0 2013-11-22 15:26:20
There is a solution that works for me:
http://jsbin.com/ODaFaGU/3/edit
Check out the PART 2 and PART 3.
There are two solutions inside.
One for the regular form submit buttons - it allows you to tap the buttons without a delay, but also ensures that pressing the "enter" key in any of the form fields will trigger a submit.
Secondly there is an additional eventHandler that combines the click, tap and keydown[enter] events into a single one - this ensures that you can hit your controls as well with the keyboard, as with a click on desktop, and a tap on mobile(without hitting the click event twice) devices.
If you have any problems with this, give me a comment, I'll fix it.
solution10
-2 2013-09-03 16:22:58
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.