AngularJS的ng-submit输入键不起作用

AngularJS ng-submit enter key not working

本文关键字：不起作用 输入 ng-submit AngularJS      更新时间：2023-09-26

我正在使用AngularJS，并有一个表单与ng-submit在它:

  <div ng-controller="LoginController as vm">
    <form class="login-form" name="vm.form" ng-submit="vm.login()">
            <h3 class="form-title">Sign In</h3>
            <div class="form-group">
                <label class="control-label">E-mailaddress</label>
                <input class="form-control" type="text" 
                      name="email" ng-model="vm.email"/>
            </div>
            <div class="form-group">
                <label class="control-label">Password</label>
                <input class="form-control" type="password" name="password" ng-model="vm.password"/>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success uppercase">Login</button>
            </div>    
        </form>
   </div>

问题:当我手动点击Login时，一切都很好。通过调用vm.login()来正确使用ng-submit。但是，当我按enter键时，没有调用ng-submit。我已经搜索了很长一段时间，观看的例子，阅读问题在GitHub，但不能弄清楚这个…有什么建议吗?

编辑

请求的控制器代码:

 angular.module('app').controller('LoginController', function LoginController(LoginFactory, $state) {
        'use strict';
        var vm = this;
        vm.login = login;
        function login() {
            console.log('login');
            LoginFactory.login(vm.email, vm.password).then(function success(response) {
                LoginFactory.setUser(response.data.data.user);
                vm.user = response.data.data.user;
                var savedState = LoginFactory.getOnLoginState();
                $state.go(!savedState.state ? 'root.dashboard' : savedState.state, savedState.stateParams);
            }, handleError);
        }
    });

这样是行不通的，我们可以查看Angular的文档:

如果表单有2+输入字段，没有按钮或输入[type=submit]，那么按回车键不会触发提交

作为一种解决方案，我建议使用两个表单标记，每个字段一个，都使用ng-submit中的相同函数，如:

<div ng-controller="LoginFactory">
    <form class="login-form" ng-submit="vm.login()">
        <h3 class="form-title">Sign In</h3>
        <div class="form-group">
            <label class="control-label">E-mailaddress</label>
            <input class="form-control" type="text"
                    name="email" ng-model="vm.email"/>
        </div>
    </form>
    <form class="login-form" ng-submit="vm.login()">
        <div class="form-group">
            <label class="control-label">Password</label>
            <input class="form-control" type="password" name="password" ng-model="vm.password"/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase">Login</button>
        </div>
    </form>
</div>

您也可以通过构建ng-enter指令并使用它来解决这个问题。下面是这样做的代码片段:

angular.module('myApp').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();
        }
    });
};

});

我已经尝试了你的代码假设你的控制器如下所示，其工作如预期。试试吧:

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="LoginFactory">
    <form class="login-form" name="vm.form" ng-submit="vm.login()">
        <h3 class="form-title">Sign In</h3>
        <div class="form-group">
            <label class="control-label">E-mailaddress</label>
            <input class="form-control" type="text"
                    name="email" ng-model="vm.email"/>
        </div>
        <div class="form-group">
            <label class="control-label">Password</label>
            <input class="form-control" type="password" name="password" ng-model="vm.password"/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase">Login</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    'use strict';
    angular.module('app', []).controller('LoginFactory', function LoginController($scope){
        $scope.vm={};
        $scope.vm.login=login;
        function login(){
            console.log('login');
        }
    });
</script>
</body>
</html>
相关文章：