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

【问题标题】：adding directive to form breaks pattern rule添加指令以形成中断模式规则
【发布时间】：2016-05-31 22:07:33
【问题描述】：

我有一个简单的登录表格。用户名必须是电子邮件形式，因此存在 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>

我在表单中添加了这个指令，所以当按下输入时表单将被提交。

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 时不起作用。对于 '$scope.loginForm.username.$error.pattern' 而不是真/假值，我得到未定义。 ng-required 仍然有效。

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

【问题讨论】：

您不应创建带有 ng 前缀的自定义指令。从 1.3+ 开始也不支持它
如果您评论scope.$apply 部分会发生什么？我觉得这是干扰ng-pattern
另外请记住，有效的电子邮件地址可能包含许多奇怪的字符，并且通过滚动您自己的正则表达式，您可能会禁止某些有效地址 - cfr this question。在实践中，通常最好使用非常宽松的正则表达式（例如，只需检查 @ 符号），然后通过实际发送电子邮件来验证地址。
@Sylvan 是的，如果我评论 scope.$apply 模式有效。我现在该怎么办？

标签： javascript angularjs forms

【解决方案1】：

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

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

【讨论】：