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

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