Javascript 按enter键时AngularJS表单未提交

我试图在用户按enter键时获取要提交的登录表单。 单击“登录”按钮时，表单工作正常，但按enter键不起作用，而且会导致奇怪的行为：

• 未执行由

  ng submit

  关联的功能
• 按enter键后，将不再显示错误消息（登录失败）

以下是我的标记：

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

我运行angular v1.4.0并使用angular ui router v.0.2.15进行路由

非常感谢您的意见，非常感谢。

把这个放进去

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

而不是

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

登录

对于表单提交按钮，应为提交类型

编辑代码：

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

编辑代码：

---

请检查此

而不是使用按钮使用

谢谢Gophinath-我在寻找我问题的答案时已经偶然发现了这个答案。我还没有尝试过监听回车键（13号键）的自定义指令，因为我不打算在angular声称使用ng submit表单应该立即提交时进行变通。我已经尝试过了，请参见原始问题1中HTML代码后的注释。将

标记保留在

标记2内。确保

type=“submit”

。如果您不需要输入，则将

ng hide=“true”

设置为输入

属性

，但即使您不需要按钮，它也需要存在<代码>…我已经尝试过使用submit类型的输入而不是按钮，但没有成功。我现在尝试将控制器单独设置在一个更高一级的div中（

），但也没有成功。另外，我认为ui路由器已经正确地设置了作用域（和控制器）。您在控制台中检查了错误吗？是否可以创建fiddle？不幸的是，没有显示错误，只是当我按enter键时什么也没有发生。奇怪的是，当按enter键时，浏览器插件1Password中的“保存密码”对话框会显示出来，因此不知何故提交被识别。但是，

console.log（“登录”）（参见上面的JS代码）在尝试使用enter提交表单时，控制台中永远不会显示，只有在单击登录按钮时才会显示。我已添加了plunker。请检查它Hanks RIYAJ，您的plunker在这里对我很好。老实说，我的代码和你这个笨蛋没什么两样，但还是不起作用。我想这一定和我正在加载的另一个模块有关。。。奇怪。现在，我添加了一个自定义指令，当它检测到表单中已按下Enter键时，会触发我的登录函数，请参阅
<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>