adding directive to form breaks pattern rule

Question

I have a simple log-in form. username must be in e-mail form, so there is ng-pattern constraint.

HTML form:

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

I added this directive to the form, so when enter is pressed form will be submitted.

AngularJS Directive:

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

Problem is when I add ng-enter to the form ng-pattern doesn't work. for '$scope.loginForm.username.$error.pattern' instead of true/false value I get undefined. ng-required still works.

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

You should not create custom directives with the `ng` prefix. It also isn't supported from 1.3+ — devqon, May 31 '16 at 14:00
what happens if you comment the `scope.$apply` section? I get the feeling that is what interferes with `ng-pattern` — Sylvan D Ash, May 31 '16 at 14:02
Also keep in mind that valid email addresses can contain a lot of weird characters and by rolling your own regex you will probably disallow some valid addresses - cfr [this question](http://stackoverflow.com/questions/46155/validate-email-address-in-javascript). In practice it's usually best to use a very permissive regex (eg. just check for an @ sign), and then validate the address by actually sending an email to it. — Nico, May 31 '16 at 14:09
@ Sylvan yes if I comment scope.$apply pattern works. what should I do now? — zenprogrammer, May 31 '16 at 14:13

score 0 · Accepted Answer · answered May 31 '16 at 14:07

0

You can use ng-submit and set type of button is submit in this case:

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

answered May 31 '16 at 14:07

Huy Chau

2,178
19
26

adding directive to form breaks pattern rule

1 Answers1