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

Question

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

有没有人有过让它在角度上工作的经验？您将如何添加此功能？

下面是子表单的简单HTML示例。假设“下一步”按钮正在触发范围。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[$scope.current\u步骤]引用当前表单。根据@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）键事件，并启动验证/前进步函数。

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

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

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