休憩パターンルールを作成する指示を追加

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> 

私はそうは入力したときには、フォームが送信されます押されて、フォームにこのディレクティブを追加しました。

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パターンにNG-入力を追加するときには動作しませんです。 true/falseの代わりに '$ scope.loginForm.username。$ error.pattern'の値が定義されていません。まだ必要です。

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