1

我有一个包含 5 个步骤的多步骤表单。我希望用户能够使用回车键提交每个子表单以触发验证并在成功时移动到下一个子表单。我找不到办法做到这一点。我在想也许我可以将ng-keydown事件添加到每个子表单（或绑定到的自定义指令onkeydown）并注意 enter 键keyCode。

有没有人有让这个在 Angular 中工作的经验？您将如何添加此功能？

这是子表单的简短 HTML 示例。假设“下一步”按钮$scope.nextStep()在角度控制器内触发，随后执行验证以确定用户是否可以移动到下一步或是否显示验证错误。

<form>
    <div ng-form="step1"></div>
    <div ng-form="step2"></div>
    <div ng-form="step3"></div>
    <div ng-form="step4"></div>
    <div ng-form="step5"></div>

    <button type="button" class="btn" ng-click="nextStep()">Next Step</button>
</form>

对于那些阅读并寻找答案的更多信息的人

我在控制器的$scope.current_step. 使用它，我可以用来$scope[$scope.current_step]引用当前表单。使用下面@Vova 接受的答案，我会做类似于以下的事情：

$scope.myFunc = function(event) {
    if (!$scope.isFormValid()) {
        return false;
    } 

    // trigger next step (which handles it's own validation)
    $scope.nextStep();
};

$scope.isFormValid = function() {
    // check if the current form is invalid
    if ($scope[$scope.current_step].$pristine
        || $scope[$scope.current_step].$invalid
    ) {
        return false;
    }

    return true;
};
4

1 回答 1

5

使用ng-keyup指令设置函数，该函数可以获得 Enter (13) 键事件，并启动您的验证/stepForward 函数。

其他解决方案，添加 angular-ui，然后执行以下操作：

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

更多解决方案： 使用 AngularJS 按 Enter 提交表单

于 2013-12-30T16:10:57.700 回答