Angular UI和Angular UI Bootstap - 在Enter键上提交表单

Question

我在AngularJS documentation中遵循表单提交准则，但是当我按下Enter键时，表单未提交。我需要做些什么来完成这项工作？这是我的代码。最重要的一点是，我使用ng-click指定提交按钮的处理程序：

（编辑1：代码下面编辑的基础上@Pavel Horal的建议按钮已移动到形式仍然没有运气。 ）

（编辑2：。该代码实际工作你必须在当你按下输入输入字段这解决了问题）

<div class="modal-body"> 
    <form> 
     <div class="form-group"> 
      <label for="payee">Payee</label> 
      <input type="text" class="form-control" id="payee" placeholder="Enter payee" 
        ng-model="vm.txn.payee" required> 
     </div> 

     <div class="form-group"> 
      <label for="memo">Memo</label> 
      <input type="text" class="form-control" id="memo" placeholder="Enter memo" 
        ng-model="vm.txn.memo"> 
     </div> 

     ... 

     <button type="submit" class="btn btn-info" ng-click="vm.ok()">OK</button> 
     <button type="button" class="btn btn-default" ng-click="vm.cancel()">Cancel</button> 
    </form> 
</div> 

<div class="modal-footer"> 
</div> 

Answer 1

你的提交按钮是<form>之外元件。通过提交输入密钥是浏览器功能，而不是AngularJS的一项功能。

打到时输入浏览器试图找到发现第一个提交按钮并通过模拟click事件提交表单。当提交按钮超出<form>时，浏览器将不会执行任何操作。

欲了解更多信息，你可以检查specification of implicit submission。

Answer 2

您可以简单地通过在表单级别添加ng-submit指令来实现。这将调用任何表单级别字段的输入。

标记

<div class="modal-body"> 
    <form ng-submit="vm.ok()"> 
     <div class="form-group"> 
      <label for="payee">Payee</label> 
      <input type="text" class="form-control" id="payee" placeholder="Enter payee" 
        ng-model="vm.txn.payee" required> 
     </div> 

     <div class="form-group"> 
      <label for="memo">Memo</label> 
      <input type="text" class="form-control" id="memo" placeholder="Enter memo" 
        ng-enter="" ng-model="vm.txn.memo"> 
     </div> 

     ... 
    </form> 
</div>