我正在尝试使用角度UI设置表单验证。我想在提交表单之前检查表单是否有效,因此我设置了一个 ng-submit 事件处理程序。
但在实现任何验证之前,我注意到即使不提交表单,也会调用事件处理程序。在下面的示例中,当我单击"添加项目"按钮时,它会被调用:
<div ng-app="app">
<div ng-controller="ctrl">
<form name="myForm" ng-submit="sub()" novalidate>
<div ng-repeat="item in items">
<ng-form name="row">
<input type="text" name="value" ng-model="item.value" required />
</ng-form>
</div>
<button ng-click="addItem()">Add Item</button>
<input type="submit" value="Submit"/>
</form>
</div>
</div>
和JS:
var app = angular.module('app', ['ng']);
app.controller('ctrl', ['$scope', function($scope) {
$scope.items = [];
$scope.addItem = function() {
$scope.items.push({ value: $scope.items.length });
};
$scope.sub = function() {
alert("submitted?");
};
}]);
在这里看到我的小提琴:
http://jsfiddle.net/UvLBj/2/
这是应该发生的吗?在我看来,ng-submit不仅仅是在表单提交时触发的......我做错了什么吗?
相信你需要添加 type="button" 以避免意外调用提交。 更新了小提琴,似乎修复了它:
http://jsfiddle.net/UvLBj/3/
<button type="button" ng-click="doSomething()">Test</button>