問題タブ [ng-messages]

AngularJS の例からの簡単な入力:

plnkrへのリンク

5 より大きい値を入力すると、翻訳されたエラー メッセージが表示されます。translate ディレクティブを使用すると機能しません。

angular 1.3でng-messagesを使用し、さまざまなフィールドのエラーメッセージとともに検証の概要を上部に表示することは可能ですか?

どうすればこれを達成できますか? これまでに見たすべての例は、フォーム内のすべてのフィールドではなく、1 つのフィールドのエラー メッセージを表示しています。

各フィールドに複数の ng-messages セクションが必要ですか?

私はAngularJSを初めて使用しますが、広範囲に検索しましたが、この質問に対する有効な答えが見つかりませんでした。おそらく、私が考えている方法では不可能です。

私が望むのは、エラー条件を組み合わせて、より一般的なエラー メッセージをng-messagesモジュールで使用できるようにすることです。私たちのアプリケーションは多言語であるため、これにより、テキストを維持する時間を大幅に節約できます。私の例では、minlength、maxlength、および pattern を組み合わせて、1 つの汎用メッセージを参照させるとよいでしょう。私がそれを機能させる唯一の方法は、タイプごとに個別のng-messageを作成し、冗長と思われるエラーテキストを再利用することです。うまくいけば、いつ/どのように使用するか、または || を理解していないなど、私が見逃している短いものです。

私がやろうとしていることを説明するために、この単純な Plunkを作成しました。

編集1

単一の正規表現パターン表現を使用できることは認識していますが、上記の検証は厳密に問題を再現し、例を示すためのものです。単一のパターンでは表現できなかった、組み合わせたい他の検証があります。

現在、すべての ng メッセージにこのようなマークアップを使用しています

少し面倒ですが、どうにかして ng-messages をオーバーライドまたは拡張して、フィールドがダーティかどうか、またはフィールドが内部にネストされているフォームかどうかを自動的にチェックするようにしたいと思います (おそらく DOM をたどって?) は $ です提出した。

これをサイト内のすべての ng メッセージのデフォルトの動作にしたいのですが、入力が使用されておらず、フォームが送信されていないときにエラー メッセージを表示する必要がある状況を予測できません。そのため、その動作をオーバーライドしても安全だと思いますが、その方法がわかりません。

ng-messages を完全に置き換えることができることはわかっていますが、そのディレクティブのデフォルトの動作をすべて再作成する必要があり、これらは将来の角度バージョンで変更される可能性があるため、可能であれば拡張したいと思います。Angular がこのためのフックを提供しているか (デコレータ メソッドについて漠然と聞いたことがありますか?)、または条件が満たされていない場合に要素を非表示にする「ng-custom-messages」のような兄弟ディレクティブを作成するかどうかはわかりません。会った？

それで、私はいくつかのアイデアを持っていますが、それらを実装する方法を示すためにちょっとしたコツが必要です。

私はAngularフォームを持っています。ng-patternフィールドは属性を使用して検証されます。リセットボタンもあります。私は次のようにイベントを処理するためにUi.Utils Event Binderresetを使用しています:

ご覧のとおり、フォームがリセットされると、 のresetメソッドが呼び出され$scopeます。コントローラ全体は次のようになります。

ここスタック オーバーフローに関する別の質問からのアドバイスに従って、電話form.$setPristine()しています。カウンターを追加した唯一の理由は、コードが呼び出されていることを証明することでした (それはそうです)。form.$setUntouched

問題は、フォームをリセットした後でも、検証メッセージが消えないことです。Plunkerで完全なコードを見ることができます。エラーが消えないことを示すスクリーンショットを次に示します。

angular-messages を使用して、角度アプリでフォーム検証エラーを表示しています。ドキュメントに従って、次のコードを作成しました

javascript に ngMessages ディレクティブを含め、angular-messages.js ファイルをインポートしました。

残念ながら、これら 2 つのメッセージは永続的に表示されます。入力フィールドに何を入力しても、それが有効な電子メールかどうかは関係ありません。両方のメッセージが常に表示されます。ng-message を 1 つだけ含めようとしても、結果は同じです。

私は何が間違っているのでしょうか？

編集：私の説明があまり明確でない場合、これは結果のプリントです https://s9.postimg.cc/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png

ngMessages ディレクティブを使用して、自動保存するリッチ テキスト エディターの 2 つの異なるメッセージを表示しようとしています...単純に「保存済み」と「保存中...」です。

コントローラーの背後にあるサービスからプロパティを返す関数を返すコントローラーの変数を公開しました (明らかにこれが双方向バインディングを取得する唯一の方法であるため)。

そして、私のコントローラー変数は非常に単純です

そして、私のサービスは、プライベート変数に get アクセサーを配置するだけです

Chrome 開発ツールでは、saveStatus がスコープ内にあり、機能を返していることがわかります。関数を使用しなくても (メッセージは常に「SAVED!」と表示されるはずです)、メッセージは表示されません....

出力は ngMessages によってフォーマットされているように見えるので、ロードされて利用可能だと思いますが、$errors コレクションを使用していない Web 上の例は見つかりません!

angularjs で Web アプリを作成し、Angular マテリアル(質問に関連するかどうかは不明) とngMessagesを使用して、無効な入力に対するフィードバックをユーザーに提供します。

通常、提供されたディレクティブの検証では、次のような方法で検証できます。

しかし、独自のカスタム ディレクティブを作成すると...

それを私の入力に含めます...

カスタム ディレクティブの検証に基づいて入力が無効な場合、フィールドが赤くなり、$invalid 値が true に設定されるため、入力が検証されることはわかっていますが、いつに基づいて ngMessages でメッセージを表示するかはわかりません。これが起こります。

カスタム ディレクティブの検証が無効な場合、メッセージが表示されないようです。どうすればいいですか？事前に助けてくれてありがとう。

私は lobInclude と呼ばれるディレクティブを書きました。ngInclude と同じものが必要ですが、スコープはありません:

すべて問題ないようですが、ディレクティブを使用すると ng-Messages が正しく機能しません。例を次に示します: http://codepen.io/jros/pen/jPxmxj?editors=101

コードペンには、入力と、他の入力を含むスクリプト ng-template を含むディレクティブを含むフォームがあります。

最初の入力の ng-messages は正常に機能しますが、私のインクルードにはありません。

アイデアはありますか？