問題タブ [angularjs-ng-form]

5 つのステップを持つマルチステップ フォームがあります。ユーザーがEnterキーを使用して各サブフォームを送信し、検証をトリガーし、成功すると次のサブフォームに移動できるようにしたいと思います。これを行う方法が見つかりません。ng-keydown各サブフォーム (または にバインドするカスタム ディレクティブ) にイベントを追加onkeydownして、Enter キーを監視できるのではないかと考えていましたkeyCode。

これをAngularで動作させた経験がある人はいますか? この機能をどのように追加しますか?

サブフォームの簡単な HTML サンプルを次に示します。「次のステップ」ボタンが$scope.nextStep()角度コントローラー内でトリガーされ、その後検証を実行して、ユーザーが次のステップに移動できるかどうか、または検証エラーが表示されるかどうかを判断するとします。

回答の詳細を読んで探している人のために

コントローラーの 内でフォーム ステップを追跡し$scope.current_stepます。それを使用$scope[$scope.current_step]して、現在のフォームを参照するために使用できます。以下の@Vovaの受け入れられた回答を使用して、次のようなことを行います。

AngularJS フォームの登録済みコントロールをループする方法が必要です。基本的に、私はすべての $dirty コントロールを取得しようとしていますが、コントロールの配列はありません (FormController には、コントロール自体を含むだけでなく、それぞれ独自のオブジェクトとしてさまざまなプロパティ/関数があります)。

ソース コードを調べたところ、探しているcontrols配列とまったく同じ配列が FormController にあることがわかりました。この値にアクセスする方法、または FormController を拡張してこのcontrols配列を返す関数を含める方法はありますか?

編集: Plnkrデモ

また、技術的には「$」のキー文字列の最初の文字をチェックできることに気付きましたが、Angular の将来のバージョンで FormController/ディレクティブが変更された場合に備えて、それを避けたいと思います。

編集 2: 別の説明: このすべての私の目標は、コントロールのリスト全体をループするかどうかにかかわらず、どの特定のフィールドが $dirty であるかを判断できるようにすることです ($dirty、$invalid、$error、$name、および Form オブジェクトにそのまま存在するその他のプロパティ) または FormController を拡張し、現在ダーティな (そしてそれらの開始値と等しくない) コントロールのみを返す関数を作成します。

編集 3: 私が探しているソリューションは、さまざまな構造のフォーム/モデルに適用できる必要があります。スコープのモデルは AJAX を介して生成されるため、構造は既に設定されています (AJAX を介して既に受信しているすべてのデータに対して新しい構造をハードコーディングする必要はありません)。また、このフォーム送信プロセスを複数のフォーム/モデルで使用することを検討していますが、オブジェクト モデルのさまざまなエンティティに適用されるため、それぞれが異なる JSON 構造を持っています。これが、すべてのフィールドのフラットな配列を取得できる唯一の場所であるためcontrols、FormController 内のオブジェクトにアクセスする方法を求めることを選択した理由です(以下からコードを投稿します)。FormController

ご覧のとおり、フォーム自体にはcontrols非公開で使用できる配列があります。FormControllerそのオブジェクトを公開できるように拡張する方法があるかどうか疑問に思っていますか? または、少なくともプライベート配列を表示できるようにパブリック関数を作成しますか?

任意の数のテキスト入力を動的に生成するドロップダウンがあり、そのすべてに異なる検証ルール (最小/最大長、パターンなど) があります。他のいくつかのstackoverflowの質問によると。( ng-repeat、ng-show (angular)を使用して動的に作成された入力を検証する方法 ) ng-form モジュールを使用すると、動的検証を使用して動的フォーム要素を作成できます。

私はこれを行いましたが、問題は、ドロップダウンでの選択に基づいてテキスト フィールドの数が変更されたときに、それに応じて検証ルールが更新されないことです。たとえば、最初のドロップダウン オプションは、最小長が 3 のテキスト入力を 1 つ生成します。2 番目のオプションもテキスト入力を 1 つ生成する場合がありますが、最小長は 1 になります。元の選択範囲のテキスト フィールドからの 3 個。

私の質問は、ある種のカスタム ディレクティブを作成せずに角度でこれを行うことは可能ですか? 別の解決策は、ドロップダウン選択ごとに可能なすべてのテキスト要素を前もって出力し、ドロップダウン選択に基づいて ng-show を使用して各セットを表示/非表示にすることです。しかし、私はテンプレートをきれいに保ち、ng-repeat を使用して動的に生成したいと考えています。

最小限の例を設定しました：

ここで html と完全な例を表示してください: http://jsfiddle.net/anpsince83/kBVR2/

わかりましたので、次のようなフォームを作成しています。

これは検証のために機能します。つまり、mainForm.$invalid のみが強調表示され、入力にテキストが含まれた後にボタンが有効になります。ただし、batarang を使用すると、スコープが次のようになっていることに気付きました。

そのため、名前と宣言された ng-model に基づいてモデル値を作成しています。それらを同じように変更すると、次のようになります。

送信は、次の正しい範囲を示しています。

しかし、入力フィールドは最初に入力に [オブジェクト オブジェクト] と表示されます。これは、ここで何かを混乱させていると思います.....すべての入力フィールドにそれを含めることはできません。

名前とモデルを同じにしてほしい。それは漸進的な拡張方法のようであり、単に ng-submit メソッドを削除するだけで通常の非 ajax 投稿を許可し、ajax の方法は次のようになります。

誰かが私が欠けているものについての洞察を持っているか、私のアーキテクチャにゼロから欠陥がある場合は、知恵をいただければ幸いです....

私はまだ AngularJS にかなり慣れていないので、$scope のタイミングを理解するのに苦労していると思います。コントローラーでは、さまざまなフォーム要素にバインドされたモデル データのウォッチャーをセットアップしました。ウォッチャーは、フォームが無効な場合を除き、データが変更されると ajax リクエストを送信します。myForm.$valid でフォームの有効性をチェックしています。ただし、モデル データがフォームではなくコントローラーで更新される場合を除いて、これはすべて非常に簡単です。検証は期待どおりに実行されますが、form.$valid には、更新されたデータの値ではなく、以前の値が残っています。たとえば、フォームが以前に有効だった場合、必要な入力にバインドされたモデル値を削除すると、モデル データが変更されたためにウォッチャーが起動しますが、myForm.$valid の値をログに記録すると、その値はまだ true です。

だから私の質問は、A.なぜこれが起こっているのですか?、しかしもっと重要なことは、B.私が達成しようとしていることを処理する正しい方法は何ですか? カスタム ディレクティブは理にかなっていますか?

簡単な例を次に示します。

HTML:

コントローラ：

フィドル: http://jsfiddle.net/anpsince83/cK6cc/1/

コールバックを受け取るまでAngularでフォームを送信できないようにするにはどうすればよいですか?

私はこれらの線に沿って何かを持っています:

{{bar}}フォームを送信する前に、 ( を使用して) ローカル API 呼び出しから値を取得し、$httpそれをスコープに配置してから、実際のフォームを送信できるようにする必要があります ( を使用して POST するのではありません$http)。これはどのように行うことができますか？

タブに分割されたフォームがあります。各タブはng-form、メインform要素の子である です。親フォームは、他のサブフォームが有効な場合にのみ送信できます。ただし、ng-switch を使用しているため、現在のタブが有効かどうかのみをチェックします。

ここにフィドルがありますhttp://jsfiddle.net/nicolasmoise/LRfrY/2/

私のアプローチは正しいですか？ng-switch に代わるものを試す必要がありますか、またはコントローラー/サービス内にすべてのロジックを含めることができますか?

ボーナス

親フォームが送信されると、ユーザーにエラーをすぐに表示するために、無効な最初のタブ/ng-form を開く必要があります。(たとえば、tab1 と tab2 が有効な場合、tab3 にジャンプし、そこでエラーが表示されます。