Question

我在AngularJS documentation中遵循表单提交指南，但是当我按Enter键时表单未提交。我需要做什么才能使这项工作成功？这是我的代码。重要的是我使用ng-click为提交按钮指定处理程序：

（编辑1 ：根据@Pavel Horal的建议编辑以下代码。按钮已移入表单。仍然没有运气。）

（编辑2 ：此代码实际上有效。当您按Enter键时，您必须位于输入字段中。这样可以解决问题。）

<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的功能。

当点击 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 Bootstap - 在Enter键上提交表单

2 个答案: