問題タブ [ng-messages]

フォームの検証に ngMessages を使用しています。問題に直面しているのは、html が javascript によって動的に作成されており、その前に angular.message.js がロードされていることです。したがって、すべての動的 HTML 要素が作成されたときに ngMessage をトリガーしたいと考えています。

次の入力フィールドがあるとします。

問題は、ng-messages 要素が DOM のスペースを占有するため、他のフォーム要素の配置に影響を与えることです。エラーが発生するまで、この要素が DOM に追加されないことを期待していました。ng-messages 要素は常に存在しますが、個々の ng-message 要素は削除されて DOM に追加されますか?

ng-message が ng-show/ng-hide の代わりになることを期待していましたが、エラーが発生するまで完全に非表示にするには、ng-show を ng-messages コンテナーに追加する必要があるようです。 . ng-message を使用するよりエレガントな方法がありませんか?

私はいくつかの複数選択フィールドを使用しており、次のようなクライアント側の検証ui-selectを実装したいと考えています:<form>

したがって、問題は、私が試した条件が機能していないことです:

newProjectForm.frameworks.$invalid && !newProjectForm.frameworks.$pristine">常に偽のようです。

<div ng-messages="newProjectForm.frameworks.$error">同様に機能しないようです。

ただし、代わりにこの行を使用してテストしました：

<div class="form-group" ng-class="{ 'has-error' : true }">

そしてそれは機能したので、それが機能していない条件だと思います。

ngMessagesフォーム エラーに関する情報にアクセスするにはどうすればよいですか? フィールド名やその他のプロパティなど?

例：

次のような多くの例を見てきました。

入力の長さをユーザーに伝えていないため、これは適切なエラー メッセージではありません。短すぎると言っているだけです。

「このフィールドは少なくとも {{ minlength }} 文字である必要があります。」のようにレンダリングする必要があります。

さらに良いことに、「{{ フィールド }} は {{ minlength }} 文字以上である必要があります。」

異なる最小長の入力に対して異なるメッセージを定義しなければならないことは、非常に非 DRY です。

これはどのように行うことができngMessagesますか？

属性があるときにng-messageslikeを使用して検証する方法は?ng-maxlength<textarea>ui-tinymce

それとももっと良い方法がありますか？

UI Bootstrapモーダル内のUI検証フィードバックにng-messagesを使用しようとしています。( http://angular-ui.github.io/bootstrap/#/modal )。

モーダルを開くたびに、このエラーが発生します。

ここ ( https://docs.angularjs.org/api/ngMessages )で述べたように、すべてが正しくセットアップされています。すべての angularjs ファイルが参照され、メッセージ モジュールの依存関係がメイン モジュールに追加され、ディレクティブが適切に使用されますが、それでもこのエラーが発生します。ng-message または ng-messages-include の両方を使用すると発生します。

これが私のモーダルの HTML コンテンツ テンプレートです。

私はmessges-includeディレクティブをチェックしましたが、すでに親スコープでコントローラーを見つけようとしています:

うまく機能するガイドとして私が取ったスコット・アレンからのプランクを次に示します：/ FipgiTUaaymm5Mk6HIfn（2つ以上のリンクを投稿することはできません）

私はそれがモーダルの何かだと思います。このエラーの原因を知っている人はいますか?

あまり特別なことをしているわけではありません。

キーストロークごとに検証したい入力があります。検証に失敗した場合は、エラーを表示します。ぼかしイベントが $touched をトリガーするのを待たないでください。

これがデフォルトのケースだと思っていましたが、どうやらそうではないようです。角度のあるメッセージとともに角度のある素材を使用しています。capslock 検出のためにこれを行っています。

マークアップ:

最初にページにアクセスし、Caps Lock をオンにして入力を開始すると、次のようなエラー メッセージが表示されます。

したがって、これは期待どおりに機能しているように見えますが、実際のエラー メッセージは、その特定の入力でぼかしイベントが発生するまで表示されません。したがって、capslock を入力して 10 文字を入力すると、エラー オブジェクトは capslock エラーがあることを示します、しかし $touched は true ではないため、表示されません。

$touched が true に設定されると、入力に戻ることができ、すべてが期待どおりに機能します。

何か案は？前もって感謝します！