Question

我有一个包含5个步骤的多步骤表格。我希望用户能够使用回车键提交每个子表单以触发验证并在成功时转到下一个子表单。我找不到办法做到这一点。我想也许我可以为每个子表单（或绑定到ng-keydown的自定义指令）添加onkeydown个事件，并注意回车键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;
};

Answer 1

使用ng-keyup指令集函数可以获取Enter（13）键事件，并启动验证/ stepForward函数。

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

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

更多解决方案： Submit form on pressing Enter with AngularJS

如何在angular.js中查看ng-submit事件或在子表单上输入按键？

1 个答案: