Question

我在互联网上搜索了很多，但是我没有让我的程序可行。所以，我为我的问题选择stackoverflow。基本上我想在验证失败时显示验证错误消息。为此，我使用ngMessage指令集中错误消息，以便我可以轻松更新任何错误消息。但消息没有显示出来。这是我的代码：

Index.php
<div  class="alert alert-danger field-wrapper errors">
   <div ng-messages ="loginForm.email.$error"><div ng-messages-include="ng-errorMessages.php"></div></div>
   <div ng-messages ="loginForm.password.$error"><div ng-messages-include="ng-errorMessages.php"></div></div>
</div>

这是我的消息文件代码：

ng-errorMessages.php
<div ng-messages for="loginForm.email.$error">
    <div ng-message ng-show="required">Email is required!</div>
    <div ng-message ng-show="email">Email is not vang-messaged format!</div>
</div>
<div ng-messages for="loginForm.password.$error">
    <div ng-message ng-show="minlength">Password is too short!</div>
    <div ng-message ng-show="maxlength">Password is too long</div>
    <div ng-message ng-show="required">Password is required!</div>
    <div ng-message ng-show="!required && passwordWeak">Password is weak!</div>
</div>

没问题，没有出现。当我检查chrome中的元素时，我得到了这个输出：

<div class="alert alert-danger field-wrapper errors">
        <div ng-messages="loginForm.email.$error" class="ng-inactive"><!-- ngMessagesInclude: ng-errorMessages.php --><div ng-messages="" for="loginForm.email.$error" class="ng-scope ng-inactive">
        <!-- ngMessage:  -->
        <!-- ngMessage:  -->
    </div>
        <div ng-messages="" for="loginForm.password.$error" class="ng-scope ng-inactive">
            <!-- ngMessage:  -->
            <!-- ngMessage:  -->
            <!-- ngMessage:  -->
            <!-- ngMessage:  -->
        </div>
    </div>
    <div ng-messages="loginForm.password.$error" class="ng-inactive"><!-- ngMessagesInclude: ng-errorMessages.php --><div ng-messages="" for="loginForm.email.$error" class="ng-scope ng-inactive">
        <!-- ngMessage:  -->
        <!-- ngMessage:  -->
    </div>
    <div ng-messages="" for="loginForm.password.$error" class="ng-scope ng-inactive">
        <!-- ngMessage:  -->
        <!-- ngMessage:  -->
        <!-- ngMessage:  -->
        <!-- ngMessage:  -->
    </div></div>
</div>

请朋友们帮助我。这是Plunkr

Answer 1

以下是我的发现，请参阅此plunker

我将此部分更改为

<div class="alert alert-danger field-wrapper errors">
  <div ng-messages="loginForm.email.$error">
    <div ng-messages-include="ng-errorMessages.html"></div>
  </div>
  <div ng-messages="loginForm.password.$error">
    <div ng-messages-include="ng-errorMessages.html"></div>
  </div>
</div>

到index.html文件中：

<div class="alert alert-danger field-wrapper errors">
  <div ng-messages="loginForm.email.$error || loginForm.password.$error">
    <div ng-messages-include="ng-errorMessages.html"></div>
  </div>
</div>

并且

<div ng-messages for="loginForm.email.$error">
    <div ng-message ng-show="required">Email is required!</div>
    <div ng-message ng-show="email">Email is not vang-messaged format!</div>
</div>
<div ng-messages for="loginForm.password.$error">
    <div ng-message ng-show="minlength">Password is too short!</div>
    <div ng-message ng-show="maxlength">Password is too long</div>
    <div ng-message ng-show="required">Password is required!</div>
    <div ng-message ng-show="!required && passwordWeak">Password is weak!</div>
</div>

为：

<div ng-messages for="loginForm.email.$error">
    <div ng-message="required">Email is required!</div>
    <div ng-message="email">Email is not vang-messaged format!</div>
</div>
<div ng-messages for="loginForm.password.$error">
    <div ng-message="minlength">Password is too short!</div>
    <div ng-message="maxlength">Password is too long</div>
    <div ng-message="required">Password is required!</div>
    <div ng-message="!required && passwordWeak">Password is weak!</div>
</div>

使用ng-messages-include工作正常。

含有ng-message-include的AngularJS ng-messages未显示

1 个答案: