web-dev-qa-db-ja.com

angularjs：ngメッセージが常に表示される

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

<form name="loginForm">
  <label class="item item-input">
    <input type="email" placeholder="Email" ng-model="data.email" name="email" required>
  </label>
  <div ng-messages="loginForm.email.$error" style="color:maroon">
    <div ng-message="required">Please input a valid e-mail address</div>
    <div ng-message="email">You did not enter your email address correctly...</div>
  </div>
</form>

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

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

何が悪いのでしょうか？

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

angularjsng-messages
23
Paraphiliac Ostrich

共有しているコードはすべて問題ないようです。

<form name="loginForm">
    <label class="item item-input">
        <input type="email" placeholder="Email" ng-model="data.email" name="email" required>
    </label>
    <div ng-messages="loginForm.email.$error" style="color:maroon">
        <div ng-message="required">Please input a valid e-mail address</div>
        <div ng-message="email">You did not enter your email address correctly...</div>
    </div>
</form>

ここにPlunkerの作業コピーがあります 私はあなたのコードを使用しています。

Angularjsのドキュメント から。

デフォルトでは、ngMessagesは一度に1つのエラーのみを表示します。ただし、すべてのメッセージを表示する場合は、ngMessagesディレクティブを含む要素でng-messages-multiple属性フラグを使用してこれを実行できます。

フィールドがダーティになった後にエラーを表示したい場合は、こちら link にアクセスしてください。

NgMessageモジュールとライブラリも含めていることを確認してください。 Carlosの答え を参照してください。

ありがとう

9
jlulloav

NgMessageを実際にモジュールに含めていることを確認する必要があります。

var app = angular.module('app', [
    'ngMessages'
])

...そしてライブラリをプロジェクトに含めたこと

<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>
67
Carlos A. Cabrera

確認する

<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$invalid && loginForm.email.$touched">
...
</div>

このトリックは私の日を救った。

2
Kumar Immanuel