23

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

<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-message を 1 つだけ含めようとしても、結果は同じです。

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

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

4

3 に答える 3

68

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

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

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

<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>
于 2015-07-17T19:43:27.253 に答える
2

確認する

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

このトリックは私の一日を救いました。

于 2016-12-19T10:33:41.503 に答える