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

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指令set函数可以获取Enter(13)键事件,并激活你的validation/stepForward函数.

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

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

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