AngularJS：在表单外调用ng-submit事件
[英]AngularJS: Call the ng-submit event outside the form
问题描述
I'm a fish in AngularJS and I have this scenario. 
我是AngularJS的鱼，我有这个场景。
<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. 在正常情况下，AngularJS提供ng-submit指令作为表单中的属性，但我需要在外面调用它。
So, someone has experienced the same problem? 那么，有人遇到过同样的问题吗？ If yes, what you did? 如果是的话，你做了什么？
10 个解决方案
解决方案1
51 2015-02-10 12:57:10
Use HTML5's form attribute, here's a sample: 使用HTML5的form属性，这是一个示例：
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>
解决方案2
17 已采纳 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>. 请使用ng-controller包围您的代码，并使用ng-单击<form>范围之外的按钮。
I make a sample on jsfiddle for you... try it: 我在jsfiddle上为你做一个样本...试试吧：
http://jsfiddle.net/xKkvj/2/ 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: 与js：
function Ctrl($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function () {
if ($scope.text) {
$scope.list.push($scope.text);
$scope.text = '';
}
};
}
解决方案3
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 这是迄今为止我找到的最干净的解决方案，所有信用都归@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. 此方法不需要任何其他控制器JS或其他jQuery调整。
解决方案4
5 2016-05-14 12:49:25
Angular 2 Angular 2
For anyone looking to achieve the same with Angular 2, ngForm exposes an event emitter you can use. 对于希望使用Angular 2实现相同功能的任何人，ngForm会公开您可以使用的事件发射器。
https://angular.io/api/forms/NgForm 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 您还可以从组件ts / js文件中执行相同的发射
解决方案5
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>
解决方案6
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 所有伟大的答案，但超级解决方案，所有选项都列出： 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: 并扩展@ mk并从@ 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);
});
}
};
});
解决方案7
1 2016-06-26 12:50:22
Short answer Look at http://jsfiddle.net/84bodm5p/ 简短回答一下http://jsfiddle.net/84bodm5p/
Easiest way for me create special directive for external submission. 对我来说最简单的方法是为外部提交创建特殊指令。
Important only use right event .triggerHandler('submit') on form element 重要的是仅在表单元素上使用权限事件.triggerHandler（'submit'）
$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? 看看我在这里的答案如何在AngularJS中以编程方式触发表单提交？
解决方案8
1 2017-10-10 12:59:18
如果你正在寻找提交状态的句柄：在函数ng-click中只需添加vm.formName。$ setSubmitted（）;
ng-click="vm.formName.$setSubmitted(); vm.submit()"
解决方案9
0 2013-11-22 15:26:20
There is a solution that works for me: 有一个适合我的解决方案：
http://jsbin.com/ODaFaGU/3/edit http://jsbin.com/ODaFaGU/3/edit
Check out the PART 2 and PART 3. 查看第2部分和第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. 其次还有一个额外的eventHandler，它将click，tap和keydown [enter]事件组合成一个 - 这可以确保您可以通过键盘点击控件，就像点击桌面一样，然后点击移动设备（没有点击两次点击事件）设备。
If you have any problems with this, give me a comment, I'll fix it. 如果你有任何问题，请给我一个评论，我会解决它。
解决方案10
-2 2013-09-03 16:22:58
In Angular you don't submit forms (well, at least in the angular way). 在Angular中，您不提交表单（好吧，至少以有角度的方式）。 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. 只需在<button>调用该功能，即可开始使用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.