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
共有しているコードはすべて問題ないようです。
<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の答え を参照してください。
ありがとう
NgMessageを実際にモジュールに含めていることを確認する必要があります。
var app = angular.module('app', [
'ngMessages'
])
...そしてライブラリをプロジェクトに含めたこと
<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>
確認する
<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$invalid && loginForm.email.$touched">
...
</div>
このトリックは私の日を救った。