我有一个我想要嵌套的表单,但这是不可能的,因为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>
顺便说一句,两个表单都在一个控制器下,如果这有帮助的话
发布于 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/
发布于 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;
}
有关工作代码示例&一个有助于显示验证消息的小实用程序方法,请参阅上面链接中的答案。
发布于 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表单。
https://stackoverflow.com/questions/11816757
复制相似问题