如何在AngularJS中手动触发表单的提交？
如何在AngularJS中手动触发表单的提交？
提问于 2012-08-05 21:17:20
我有一个我想要嵌套的表单，但这是不可能的，因为HTML不能接受嵌套表单。有没有办法在AngularJS的第一个表单上手动调用提交(触发验证，例如required)？
下面是代码的样子：
<div ng-conroller="ContactController">
<form ng-submit="saveHeaderAndDetail()">
<label for="Description">Description</label>
<input type="text" ng-model="Description" required/>
<input type="text" style="visibility:hidden" />
</form>
<form ng-submit="addToDetail()">
...
</form>
<input type="button"
ng-click="what code could trigger the first form's submit?"/>
</div>顺便说一句，两个表单都在一个控制器下，如果这有帮助的话
回答 5
Stack Overflow用户
发布于 2012-08-07 07:01:50
尝试创建一个捕获事件的指令：
var app = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.triggerSubmit = function() {
$scope.$broadcast('myEvent');
console.log('broad');
};
$scope.onSubmitted = function() {
alert('submitted!');
};
}
app.directive('submitOn', function() {
return {
link: function(scope, elm, attrs) {
scope.$on(attrs.submitOn, function() {
//We can't trigger submit immediately, or we get $digest already in progress error :-[ (because ng-submit does an $apply of its own)
setTimeout(function() {
elm.trigger('submit');
});
});
}
};
});<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
<form submit-on="myEvent" ng-submit="onSubmitted()">
Form...
</form>
<hr />
<a class="btn" ng-click="triggerSubmit()">Submit</a>
</div>
原始来源：
http://jsfiddle.net/unWF3/Stack Overflow用户
发布于 2013-06-13 16:56:32
我在这里回答了类似的问题，AngularJS - How to trigger submit in a nested form
基本上，您可以通过触发$validate事件来触发验证
isFormValid = function($scope, ngForm) {
$scope.$broadcast('$validate');
if(! ngForm.$invalid) {
return true;
}有关工作代码示例&一个有助于显示验证消息的小实用程序方法，请参阅上面链接中的答案。
Stack Overflow用户
发布于 2013-03-16 02:46:01
您可以使用ng-form指令来创建嵌套表单。它将如下所示：
<form name="accountForm">
<div data-ng-form="detailsForm">
<input required name="name" data-ng-model="name">
</div>
<div data-ng-form="contactsForm">
<input required name="address" data-ng-model="address">
</div>
<button type="submit">Save</button>
</form>这样，当为accountForm触发submit时，它也会验证嵌套的ng表单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11816757
复制相关文章
相似问题