Angularjs 阻止输入验证失败时的表单提交

我正在编写一个简单的登录表单，使用 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函数。有可能防止这种行为吗？

作为一个侧面说明，我可以提到，我使用自举和需求以及。

158200 次浏览
小开

HTML:

<div class="control-group">
<input class="btn" type="submit" value="Log in" ng-click="login.onSubmit($event)">
</div>

在你的控制器中:

$scope.login = {
onSubmit: function(event) {
if (dataIsntValid) {
displayErrors();
event.preventDefault();
}
else {
submitData();
}
}
}
小开

所以 TheHippo 给出的建议并不适合我，相反，我最终将表单作为参数发送给函数，如下所示:

<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">

这使得表单在控制器方法中可用:

$scope.login = {
submit : function(form) {
if(form.$valid)....
}
小开

您的表单作为一个对象自动放入 $scope 中，可以通过 $scope[formName]访问

下面的示例将与您的原始设置一起工作，并且不需要将表单本身作为参数传递到 ng-mit 中。

var controller = function($scope) {


$scope.login = {
submit: function() {
if($scope.loginform.$invalid) return false;


}
}


};

工作示例: http://plnkr.co/edit/BEWnrP?p=preview

小开
最佳答案

你可以这样做:

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

不需要检查控制器。

小开

将提交按钮更改为:

<button type="submit" ng-disabled="loginform.$invalid">Login</button>
小开

我知道这是一个老线索，但我想我也会做出贡献。我的解决方案类似于已经标记为答案的帖子。一些内联的 JavaScript 检查可以解决这个问题。

ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"
小开

为了补充上面的答案,

我有一个2个常规按钮，如下所示。(没有类型 = “提交”任何地方)

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

无论我如何尝试，在表单有效后按回车键，“清除表单”按钮被调用，清除整个表单。

作为解决办法,

我必须添加一个虚拟提交按钮，这是禁用和隐藏。

<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>


<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>


<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

嗯，我的意图是从来没有提交在回车，所以以上给出的黑客工作正常。

小开

虽然不是 OPs 问题的直接解决方案，但是如果你的表单在 ng-app上下文中，但是你想要 Angular 完全忽略它，你可以使用 ngNonBindable指令明确地做到这一点:

<form ng-non-bindable>
...
</form>
小开

我知道现在很晚了，已经有人接了，但是我想和大家分享一下我做的好东西。 我创建了一个 ng- 验证指令，该指令钩住表单的 oncommit，然后，如果 $eval 为 false，它就会发出 stop-default:

app.directive('ngValidate', function() {
return function(scope, element, attrs) {
if (!element.is('form'))
throw new Error("ng-validate must be set on a form elment!");


element.bind("submit", function(event) {
if (!scope.$eval(attrs.ngValidate, {'$event': event}))
event.preventDefault();
if (!scope.$$phase)
scope.$digest();
});
};
});

在你的 html:

<form name="offering" method="post" action="offer" ng-validate="<boolean expression">

提交答案