加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

即使没有提交,AngularJS ng-submit事件处理程序也被调用

发布时间:2020-12-17 09:15:28 所属栏目:安全 来源:网络整理
导读:我正在尝试使用angular-ui来设置表单验证.我想在提交表单之前检查表单是否有效,因此我已经设置了一个ng-submit事件处理程序. 但是,在甚至实现任何验证之前,我注意到即使没有提交表单也会调用事件处理程序.在下面的示例中,当我单击添加项按钮时,它会被调用:
我正在尝试使用angular-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提交不仅仅是在表单提交…我做错了吗?

相信你需要添加type =“button”来避免意外提交.更新了小提琴,似乎解决了它:

http://jsfiddle.net/UvLBj/3/

<button type="button" ng-click="doSomething()">Test</button>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读