当我有多个可能的提交按钮时，如何在 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

来自docs

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

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

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

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

很遗憾，您不能使用这样的绑定修改按钮的“类型”：

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

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

如果您只想在任何给定时间显示一个按钮，那么将 ng-show 更改为 ng-if 即可解决问题 (see this Plunk)。

如果您希望两个按钮都可见，那么我能想出的不涉及创建自定义按钮指令的唯一解决方案是复制您的按钮块，以便您根据自己的条件使用不同的块 (see this 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>

Answer 2

将不应提交表单的按钮更改为<button type="button">

button  "clickable, but without any event handler until one is assigned"

另请参阅：AngularJS: All buttons inside form triggers submit?

Answer 3

请尝试ng-if 而不是ng-show

代码

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

Answer 4

您需要在表单本身上提供一个提交方法，然后如果您希望按钮提交表单，只需将按钮标记为 type="submit"。

请参阅 ngSumbit 上的 Angular 文档。

阅读您的代码，您似乎只想在任何给定时间看到一个按钮。基于此，我认为您真正想要的是根据 ts.test.userTestId 的条件修改按钮上的标签。

这里有一个 jsfiddle 演示 1) 表单提交处理，2) 查看/获取按钮上的标签更改，以及 3) 如果你真的需要，你可以有一个额外的按钮。

function ButtonController($scope) {
    $scope.ts = {
        test: {
            userTestId: ''
        }
    }
    $scope.getTest = function (value) {
        alert('getTest called');
    }
    $scope.submit = function () {
        if ($scope.ts.test.userTestId) {
            alert("call $state.tranistionTo('s.e.q')");
        } else {
            $scope.getTest($scope.ts.test);
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <h2>The button</h2>
    <div ng-controller="ButtonController">
        <form ng-submit="submit()">
            <input type="text"
                   ng-model="ts.test.userTestId">
            <button type="submit">{{ ts.test.userTestId ? 'View' : 'Acquire' }}</button>
          
            <br><br>
            Here's an extra button which also submits the form. Notice that the submit routine
            still only runs once and having this extra button doesn't cause any problems.
            <br>
            <button type="submit">Some other submit button</button>

        </form>
    </div>
</div>