Angular 和 Angular UI Bootstrap - 按 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> 元素之外。通过 Enter 键提交 是浏览器的一项功能，而不是 AngularJS 的功能。

当点击 Enter 时，浏览器会尝试查找第一个提交按钮并通过模拟 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>

Angular 和 Angular UI Bootstrap - 按 Enter 键提交表单

Angular and Angular UI Bootstrap - Submit a form on Enter key

twitter-bootstrap

angularjs

angular-ui-bootstrap