AngularJS形式不提交时pressing进入 [英] AngularJS form not submitting when pressing enter

问题描述

我试图让一个登录形式，当用户presses Enter提交。
点击登录按钮上时，窗体工作完全正常，但pressing进入不起作用，而且，导致奇怪的行为：

I'm trying to get a login-form to submit when the user presses enter. The form works perfectly fine when the "Login"-button is clicked, but pressing enter doesn't work and furthermore, causes a strange behavior:

• 按相关NG-提交功能没有被执行


• 错误信息（登录失败）是永远不会被后pressing再次显示输入

下面是我的标记：

<form ng-submit="login()" class="login-form">
    <div class="alert alert-danger" ng-class="{ 'display-hide': !showError }">
        <button class="close" data-close="alert"></button>
            <span> Login failed </span>
    </div>
    <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">Username</label>
        <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username" ng-model="username"/>
    </div>
    <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">Password</label>
        <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/>
    </div>
    <div class="form-actions">
        <button class="btn btn-success uppercase">Login</button>
    </div>
</form>

请注意，我试图替换＆LT;按钮...＆GT; 与＆LT;输入类型=提交...＆GT; ，但没有成功无论是。

Note that I tried replacing <button...> with <input type="submit"...> with no success either.

与登录相应的控制器（） - 函数如下所示：

The corresponding controller with the login()-function looks as follows:

.controller('LoginCtrl', ['$rootScope', '$scope', ..., function LoginController ($rootScope, $scope, ...) {
    $scope.showError = false;

    $scope.login = function()
    {
        console.log("logging in");
        $http({
            url: $scope.apiEndpointLogin,
            method: 'POST',
            data: {'username': this.username, 'password': this.password}
        }).then(function(response) {
            $scope.showError = false;

            [...]
        }, function() {
            $scope.showError = true;
        });

    };
}]);

我运行V1.4.0角度和使用角度的UI路由器v.0.2.15路由。

I run angular v1.4.0 and use angular-ui-router v.0.2.15 for routing.

感谢您的任何投入，多AP preciated。

Thanks for any input, much appreciated.

推荐答案

将这个有一个

 <input type="submit" class="btn btn-success uppercase" value="Login" > 

而不是

 <button class="btn btn-success uppercase">Login</button>

有关表格提交按钮应提交的类型。

For form submitting button should be type of submit.

编辑code：

<form   class="login-form"  ng-submit="login()" >
    <div class="alert alert-danger" ng-class="{ 'display-hide': !showError }">
        <button class="close" data-close="alert"></button>
            <span> Login failed </span>
    </div>
    <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">Username</label>
        <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username" ng-model="username"/>
    </div>
    <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">Password</label>
        <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/>
    </div>
    <div class="form-actions">
        <input  type="submit" class="btn btn-success uppercase"  >
    </div>

</form>

另外，也请您是否 LoginCtrl 是表单DOM以上的地方。

Also please check whether your LoginCtrl is places above your form DOM.

编辑code：

请检查该 Plunker

这篇关于AngularJS形式不提交时pressing进入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！