Question

我的AngularJS代码中有字段描述：

    input.form-control(type='password' placeholder='password' id='passwordInput'                                        
    name='passwordInput' ng-model='credentials.password
    ng-enter='loginByEnter(credentials,loginForm.$valid)'                                          
    ng-maxlength='{{passwordMaxLen}}'   required form-control)

有问题的行是ng-enter one。 loginByEnter函数是：

$scope.loginByEnter = function(credentials,htmlValidated) {
  if (htmlValidated) {   
    $scope.login(credentials);   
  } 
};

自定义指令ng-enter是

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

所有这一切的目的：我希望用户在输入密码时进行登录并按Enter（这样他就不必在其他地方按下单独的登录按钮）。但我还需要验证表格。可以更优雅地完成，而无需在输入时查询验证功能吗？

Answer 1

您需要查看此article。

它解释了如何在AngularJs中进行表单验证。

简单地说，您需要将input标记括在form标记中，然后您需要使用ng-submit标记上的form指令来允许用户提交表格而不按登录按钮。

您无需使用自定义ng-enter指令。

Answer 2

表单提交不需要“ngEnter”或类似的键盘事件处理器。可以使用<form>元素上的ngSubmit来处理按键（Enter）或按键点击提交。

查看

<form ng-submit="onLoginSubmit()">
     <input type="text" ng-model="username" />
     <input type="password" ng-model="password" /> 

     <input type="submit" /> 
</form>

控制器

function Controller($scope, ...) {

     $scope.onLoginSubmit = function() { 
          if(validate($scope.username, $scope.password)) {
              // Magic 
          }
     }    
}

在Enter keypress上使用AngularJS验证表单

2 个答案: