表格 – ng-submit不会阻止提交
发布时间:2020-12-17 17:49:08 所属栏目:安全 来源:网络整理
导读:SO上有很多类似的问题.我经历了很多,但没有发现我的问题. 我有一个使用ng-submit的表单.不幸的是,即使表单无效,按Enter或单击提交仍然有效.调用ng-submit方法. CodePen示例:http://codepen.io/calendee/pen/tgFhq form name="testForm" novalidate ng-submi
SO上有很多类似的问题.我经历了很多,但没有发现我的问题.
我有一个使用ng-submit的表单.不幸的是,即使表单无效,按Enter或单击提交仍然有效.调用ng-submit方法. CodePen示例:http://codepen.io/calendee/pen/tgFhq <form name="testForm" novalidate ng-submit="submit()"> <label for="firstname">First Name:</label> <input type="text" name="firstname" ng-model="data.firstname" required="true" ng-minlength="4" ng-maxlength="10"> <div class="errors"> <p>firstname Errors:</p> <p ng-show="testForm.firstname.$error.required">firstname is required</p> <p ng-show="testForm.firstname.$error.minlength">firstname is too short</p> <p ng-show="testForm.firstname.$error.maxlength">firstname is too long</p> </div> <label for="lastname">Last Name:</label> <input type="text" name="lastname" ng-model="data.lastname" ng-required="true" ng-minlength="4" ng-maxlength="10"> <div class="errors"> <p>lastname Errors:</p> <p ng-show="testForm.lastname.$error.required">lastname is required</p> <p ng-show="testForm.lastname.$error.minlength">lastname is too short</p> <p ng-show="testForm.lastname.$error.maxlength">lastname is too long</p> </div> <button class="button button-balanced" type="submit">Submit</button> </form> 如果我更改表单的ng-form,即使表单有效,提交事件也根本不起作用. CodePen样本:http://codepen.io/calendee/pen/imJdc <ng-form name="testForm" novalidate ng-submit="submit()"> <label for="firstname">First Name:</label> <input type="text" name="firstname" ng-model="data.firstname" required="true" ng-minlength="4" ng-maxlength="10"> <div class="errors"> <p>firstname Errors:</p> <p ng-show="testForm.firstname.$error.required">firstname is required</p> <p ng-show="testForm.firstname.$error.minlength">firstname is too short</p> <p ng-show="testForm.firstname.$error.maxlength">firstname is too long</p> </div> <label for="lastname">Last Name:</label> <input type="text" name="lastname" ng-model="data.lastname" ng-required="true" ng-minlength="4" ng-maxlength="10"> <div class="errors"> <p>lastname Errors:</p> <p ng-show="testForm.lastname.$error.required">lastname is required</p> <p ng-show="testForm.lastname.$error.minlength">lastname is too short</p> <p ng-show="testForm.lastname.$error.maxlength">lastname is too long</p> </div> <button class="button button-balanced" type="submit">Submit</button> </ng-form> 有没有人对我在这里做错了什么有建议? 解决方法
您可以使用内置属性$valid:
<form name="testForm" novalidate ng-submit="testForm.$valid && submit()"> 仅当testForm.$valid为true时才调用submit函数. 我在本教程中学到了它:https://www.codeschool.com/courses/shaping-up-with-angular-js. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |