当我有多个可能的提交按钮时，如何在 ENTER 上提交表单？

Question

我有一个不寻常的问题。我的表格是这样的：

     <form>
        <button ng-class="{'btn-primary': ts.test.current == true}"
                ng-click="$state.transitionTo('s.e.q');"
                ng-show="ts.test.current && ts.test.userTestId">
            View
        </button>
        <button ng-class="{'btn-primary': ts.test.current == true}"
                ng-click="getTest(ts.test)"
                ng-show="ts.test.current && !ts.test.userTestId">
            Acquire
        </button>
     </form>

我需要的是回车键来触发当前按钮主要的动作。请注意，主按钮可以是两个按钮之一，具体取决于页面上其他项目的状态。

谁能建议如何做到这一点？我看到了对 ng-enter 指令的引用，但如果可能的话，我认为最好不要使用非标准指令。

这是我迄今为止尝试过的。不幸的是，当我点击进入时什么也没有发生：

            <form ng-show="ts.test.current && ts.test.userTestId"
                  ng-submit="$state.transitionTo('s.e.q');">
                <button ng-class="{'btn-primary': ts.test.current == true}"
                        type="submit">
                    View
                </button>
            </form>
            <form ng-show="ts.test.current && !ts.test.userTestId"
                  ng-submit="getTest(ts.test)">
                <button class="btn"
                        ng-class="{'btn-primary': ts.test.current == true}"
                        type="submit">
                    Acquire
                </button>
            </form>

Answer 1

从文档

您可以使用以下两种方法之一来指定提交表单时应调用的 javascript 方法：

表单元素上的 ngSubmit 指令 第一个按钮上的 ngClick 指令或提交类型的输入字段 (input[type=submit]) 为防止处理程序的双重执行，请仅使用 ngSubmit 或 ngClick 指令中的一个。这是因为 HTML 规范中的以下表单提交规则：

如果表单只有一个输入字段，则在此字段中按 Enter 会触发表单提交 (ngSubmit) 如果表单有 2 个以上的输入字段且没有按钮或 input[type=submit] 则如果表单具有，则按 Enter 不会触发提交一个或多个输入字段和一个或多个按钮或 input[type=submit] 然后在任何输入字段中按 Enter 将触发第一个按钮或 input[type=submit] (ngClick) 上的点击处理程序和提交处理程序附表 (ngSubmit)

因此，诀窍是在任何给定时间在您的表单中只有一个“提交”类型的按钮，并根据模型的状态选择该按钮。对于多个按钮，输入将触发第一个 type="submit" 按钮上的 ng-click（它会调用 ng-submit，虽然这里不需要）

不幸的是，你不能用这样的绑定修改按钮的“类型”：

<button type="{{isPrimary ? 'submit' : 'button'}}">Acquire</button>

此外，ng-show 不会从 DOM 中删除按钮，因此您当前的解决方案为您留下了多个 type="submit" 按钮，在这种情况下，只有第一个（隐藏或不隐藏）才会执行它的点击功能。

如果您只想在任何给定时间显示一个按钮，那么将 ng-show 更改为 ng-if 即可解决问题（请参阅此 Plunk）。

如果您希望两个按钮都可见，那么我能想出的唯一解决方案是复制您的按钮块，以便根据您的条件使用不同的块（请参阅此 Plunk）。

<form>
    <div ng-if="ts.test.userTestId">
        <button ng-class="{'btn-primary': ts.test.current == true}"
            ng-click="$state.transitionTo('s.e.q');"
            type="submit">
            View
        </button>
        <button ng-class="{'btn-primary': ts.test.current == true}"
            ng-click="getTest(ts.test)"
            type="button">
            Acquire
        </button>
    </div>
    <div ng-if="!ts.test.userTestId">
        <button ng-class="{'btn-primary': ts.test.current == true}"
            ng-click="$state.transitionTo('s.e.q');"
            type="button">
            View
        </button>
        <button ng-class="{'btn-primary': ts.test.current == true}"
            ng-click="getTest(ts.test)"
            type="submit">
            Acquire
        </button>
    </div>

 </form>