当输入验证失败时，Angularjs会阻止表单提交
当输入验证失败时，Angularjs会阻止表单提交
提问于 2013-04-28 21:03:19
我正在使用angularjs和一些客户端输入验证来编写一个简单的登录表单，以检查用户名和密码是否为空且长度不超过三个字符。请参见以下代码：
<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
<fieldset>
<div class="control-group input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
</div>
<div class="control-group input-prepend">
<span class="add-on"><i class="icon-lock"></i></span>
<input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
</div>
<div class="control-group">
<input class="btn" type="submit" value="Log in">
</div>
</fieldset>
</form>和控制器：
var controller = function($scope) {
$scope.login = {
submit: function() {
Console.info($scope.login.username + ' ' + $scope.login.password);
}
}
};问题是，即使输入无效，也会调用login.submit函数。有没有可能防止这种行为？
顺便说一句，我可以提到我也使用bootstrap和requirejs。
回答 8
Stack Overflow用户
回答已采纳
发布于 2013-11-21 02:08:42
您可以执行以下操作：
<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">不需要控制器检查。
Stack Overflow用户
发布于 2014-06-18 01:25:13
将提交按钮更改为：
<button type="submit" ng-disabled="loginform.$invalid">Login</button>Stack Overflow用户
发布于 2013-05-02 23:34:21
因此，来自TheHippo的建议答案对我不起作用，我最终将表单作为参数发送给函数，如下所示：
<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">这使得表单在控制器方法中可用：
$scope.login = {
submit : function(form) {
if(form.$valid)....
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16263158
复制相关文章
相似问题