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

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