Question

我正在编写一个简单的登录表单，使用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。

Answer 1

你可以这样做：

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

无需控制器检查。

Answer 2

将提交按钮更改为：

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

Answer 3

所以TheHippo的建议答案对我不起作用，而是我最终将表单作为参数发送给函数，如下所示：

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

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

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

Answer 4

您的表单会自动作为对象放入$ scope。可以通过$scope[formName]

访问它

以下示例将与您的原始设置一起使用，而无需将表单本身作为ng-submit中的参数传递。

var controller = function($scope) {

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

        }
    }

};

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

Answer 5

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();
        }
    }
}

Answer 6

虽然不是OP问题的直接解决方案，但如果您的表单在Origin上下文中，但您希望Angular完全忽略它，则可以使用ngNonBindable指令明确地执行此操作：< / p>

ng-app

Answer 7

只是添加上面的答案，

我有2个常规按钮，如下所示。（没有类型=＆＃34;提交＆＃34;任何地方）

<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>

无论我尝试了多少，在表单有效后按Enter键，＆＃34; Clear Form＆＃34;按钮被调用，清除整个表格。

作为解决方法，

我必须添加一个禁用和隐藏的虚拟提交按钮。 这个虚拟按钮必须位于所有其他按钮之上，如下所示。

<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>

好吧，我的意图是永远不要在Enter上提交，所以上面给出的hack工作正常。

Answer 8

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

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

Answer 9

我知道已经很晚了并得到了回答，但我想分享我所做的那些整洁的东西。我创建了一个ng-validate指令来挂钩表单的onsubmit，如果$ eval为false，它会发出prevent-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">

当输入验证失败时，Angularjs会阻止表单提交

9 个答案: