我是 AngularJS 中的一条鱼，我有这种情况。
<form>
<input type="text">
</form>
<button type="submit">submit</button>
通常，AngularJS 提供 ng-submit 指令作为表单中的属性，但我需要在外部调用它。
那么，有人遇到过同样的问题吗？如果是，你做了什么？
问问题
78070 次
10 回答
52
使用 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>于 2015-02-10T12:57:10.463 回答
17
请用 ng-controller 包围您的代码，并在 <form> 范围之外的按钮上使用 ng-click。
我在 jsfiddle 上为您制作了一个示例......试试看：
<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>
用js：
function Ctrl($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function () {
if ($scope.text) {
$scope.list.push($scope.text);
$scope.text = '';
}
};
}
于 2013-09-04T13:06:03.243 回答
9
这是迄今为止我发现的最干净的解决方案，所有学分都转到@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>
此方法不需要任何额外的控制器 JS 或其他 jQuery 调整。
于 2015-06-23T09:16:55.207 回答
5
角 2
对于希望使用 Angular 2 实现相同目标的任何人，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>
您还可以从组件 ts/js 文件中执行相同的发射
于 2016-05-14T12:49:25.950 回答
2
所有很好的答案，但超级解决方案，所有选项都列出： 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>
并扩展@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);
});
}
};
});
于 2015-02-12T07:56:33.297 回答
1
这是我的测试代码。拥有登录方法的控制器已经被调用！
<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>
于 2013-09-03T15:35:07.483 回答
1
简答看http://jsfiddle.net/84bodm5p/
对我来说最简单的方法是为外部提交创建特殊指令。
重要的是仅在表单元素上使用正确的事件 .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);
}
})
在此处查看我的答案如何在 AngularJS 中以编程方式触发表单提交？
于 2016-06-26T12:50:22.517 回答
1
如果您正在查看表单提交状态的句柄：在函数 ng-click 中，只需添加 vm.formName.$setSubmitted();
ng-click="vm.formName.$setSubmitted(); vm.submit()"
于 2017-10-10T12:59:18.003 回答
0
有一个适合我的解决方案：
http://jsbin.com/ODaFaGU/3/edit
查看第 2 部分和第 3 部分。
里面有两种解决方案。
一个用于常规表单提交按钮 - 它允许您立即点击按钮，但也确保在任何表单字段中按下“输入”键都会触发提交。
其次，还有一个额外的 eventHandler 将 click、tap 和 keydown[enter] 事件组合成一个事件 - 这确保您可以使用键盘敲击控件，就像点击桌面和点击移动设备一样（无需点击两次点击事件）设备。
如果您对此有任何问题，请给我评论，我会解决它。
于 2013-11-22T15:26:20.323 回答
-3
于 2013-09-03T16:22:58.953 回答