1

5 つのステップを持つマルチステップ フォームがあります。ユーザーがEnterキーを使用して各サブフォームを送信し、検証をトリガーし、成功すると次のサブフォームに移動できるようにしたいと思います。これを行う方法が見つかりません。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

Enter (13) キー イベントを取得できるng-keyupディレクティブ セット関数を使用し、検証/stepForward 関数を起動します。

他の解決策として、angular-ui を追加し、次のようにします。

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

その他の解決策: AngularJS で Enter キーを押してフォームを送信する

于 2013-12-30T16:10:57.700 に答える