Question

我有一个简单的登录表单。用户名必须是电子邮件形式，因此存在ng-pattern约束。

HTML表单：

<form name="loginForm">
                <div class="form-group">
                    <input type="text" name="username" ng-model="user.name" ng-pattern="/^[_a-zA-Z0-9-]*@[a-zA-Z0-9-]+([\.a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,4})$/" required class="input-text full-width" placeholder="email address"> <span ng-show="usernameError"><small style="color: red">Enter E-mail Address</small></span>

                </div>
                <div class="form-group">
                    <input type="password" name="password" ng-model="user.password" required class="input-text full-width" placeholder="password"> <span ng-show="passLenError"><small style="color: red">Password can be 6 to 15 characters long, and must have at least one letter and one digit</small></span>
                </div>
                <div class="form-group">
                    <a href="#" class="forgot-password pull-right" ng-click="passwordRecovery=true">Forgot password?</br></a>
                    <div ng-show="false" class="checkbox checkbox-inline">
                        <label> <input type="checkbox"> Remember me
                        </label>
                    </div>
                </div>
            </form>
        <div class="text-center">
            <button type="submit" ng-click="loginUser()" class="full-width btn-medium">LOGIN</button>
        </div>

我将此指令添加到表单中，因此当按下enter表单时将提交。

AngularJS指令：

loginApp.directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if(event.which === 13) {
                scope.$apply(function(){
                    scope.$eval(attrs.ngEnter, {'event': event});
                });

                event.preventDefault();
            }
        });
    };
});

问题是当我将ng-enter添加到表格时，ng-pattern不起作用。 for＆＃39; $ scope.loginForm.username。$ error.pattern＆＃39;而不是真/假值我得到了未定义。 ng-required仍然有效。

<form name="loginForm" ng-enter="loginUser()">

Answer 1

在这种情况下，您可以使用ng-submit并设置按钮类型为submit：

<form name="loginForm" ng-submit="loginUser()">
   // some thing
   <button type="submit" class="full-width btn-medium">LOGIN</button>
</form>

添加指令以形成中断模式规则

1 个答案: