AngularJS ng-submit输入密钥不起作用 [英] AngularJS ng-submit enter key not working

问题描述

我正在使用AngularJS，并且其中包含一个带有 ng-submit 的表单:

I am working with AngularJS and have a form with ng-submit in it:

  <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上阅读了问题，但无法弄清楚……有什么建议吗?

The issue: When I click manually on Login, everything works just fine. ng-submit is correctly used by calling vm.login(). However, when I press the enter key, ng-submit isn't called. I've search for a long time, watched examples, read issues at GitHub but can't figure this out... Any suggestions?

请求的控制器代码:

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

    });

推荐答案

这种方式无法正常工作，因为我们可以检查

It is not going to work that way, as we can check on Angular's docs:

如果表单具有2个以上的输入字段，并且没有按钮或输入[type = submit]，则按Enter不会触发提交

if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit

作为一种解决方法，我建议使用两个表单标签，每个字段一个，在ng-submit中都使用相同的功能，例如:

As a workaround, I would suggest using two form tags, one to each field, both using the same function in ng-submit, something like:

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

这篇关于AngularJS ng-submit输入密钥不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！