如何手动触发表单's以AngularJS提交
How to manually trigger a form's submit in AngularJS?
我有一个想要嵌套的表单,但这是不可能的,因为HTML不能接受嵌套的表单。有没有办法在AngularJS上手动调用第一个表单的提交(触发验证,例如必需)?
以下是代码的样子:
<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>
顺便说一句,如果这有助于
尝试创建一个捕获事件的指令:
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/
我在这里回答了一个类似的问题AngularJS-如何在嵌套表单中触发提交
基本上,您可以通过触发$validate
事件来触发验证
isFormValid = function($scope, ngForm) {
$scope.$broadcast('$validate');
if(! ngForm.$invalid) {
return true;
}
对于工作代码示例&一个有助于显示验证消息的小实用方法,请参阅上面链接中的答案。
您可以使用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表单。
有一种更简单的方法可以做到这一点,你可以为应用程序中的每个表单指定一个名称,然后你就可以发送你想要触发的表单的整个角度对象,或者用它做任何你想做的事。示例:
<div ng-conroller="ContactController">
<form name="myFirstForm" ng-submit="saveHeaderAndDetail()">
<label for="Description">Description</label>
<input type="text" ng-model="Description" required/>
<input type="text" style="visibility:hidden" />
</form>
<form name="mySecondForm" ng-submit="addToDetail()">
...
</form>
<input type="button"
ng-click="saveHeaderAndDetail(myFirstForm)"/>
</div>
然后在你的功能
saveHeaderAndDetail (myFirstForm) {
myFirstForm.$submitted = true
...
}
我们总是可以使用submit直接提交表单()函数。
document.getElementById("myform").submit()
通过这种方式,我们可以首先使用angularjs验证表单,如果表单有效,则使用submit方法提交。
相关文章:
- angularjs-控制器在表单提交时未调用
- AngularJS JQuery Ajax表单提交等效
- Angularjs:提交后清除表单无效
- 如何在提交<选择>与AngularJS
- AngularJS阻止提交如果输入没有't已验证
- 模拟提交和验证到AngularJS上的单独表单
- 提交时AngularJS中的表单验证不起作用
- 如何手动触发表单's以AngularJS提交
- angularjs提交表单中的开始日期结束日期验证应被禁用
- 使用angularjs将HTML表单数据从页面提交到另一个HTML页面
- 使用Angularjs提交动态表
- AngularJS提交时提交表单
- AngularJS:提交表单后保留下拉选项
- 使用AngularJS提交表单的正确方法是什么?
- 使用 angularJS 提交具有两个相似奉献值的表单时,在控制台中收到错误
- AngularJS:提交时重置表单
- AngularJS提交功能不工作
- 使用angularJS提交表单的Get按钮元素
- 使用AngularJS提交引导表单时显示进度(圆圈)
- AngularJS:提交按钮需要点击两次才能工作