Angularjs 正在处理未正确显示验证错误的消息

我已经使用角度材质制作了一个基本表单，希望在输入无效时弹出特定的错误消息。我尝试在官方网站上的验证后对其进行建模，该网站使用

ng messages

指令显示验证错误。无论出于何种原因，只有当验证状态从有效转换为无效时，才会显示错误消息

例如，有一个类似于

的输入，其中有一个

表示“请输入一封有效的电子邮件”。写入一封无效的电子邮件，然后切换到下一个值会触发验证，无效样式将应用于输入，并显示消息。如果我没有输入任何内容，而是立即进入下一个输入，那么元素也会应用无效的样式（因为

required

属性），并且没有出现预期的消息（我没有包含

required

的消息）。但是，如果我再次聚焦输入并写了一封无效的电子邮件，则消息不会显示（即使我将焦点移开并移回）。但是，输入元素仍然应用了无效的样式。只有当我写了一封无效的电子邮件（导致无效样式从元素中删除），然后删除它使其再次无效时，消息才会再次显示

是一个示例代码笔，显示其行为，并显示表单属性的值。标记为：

<div ng-app="TestApp" layout="row" layout-align="center">
    <div class="md-whiteframe-6dp md-margin" layout="column" flex="33">
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h3>Sign Up</h3>
            </div>
        </md-toolbar>
        <md-content class="md-padding">
            <form name="signupForm" class="md-inline-form">
                <div layout-gt-xs="row">
                    <md-input-container flex>
                        <label>Username</label>
                        <input name="username" ng-model="user.username" required ng-minlength="6" autofocus/>
                        <ng-messages for="signupForm.username.$error">
                            <ng-message when="minlength">
                                Username must be at least 6 characters
                            </ng-message>
                        </ng-messages>
                    </ng-input-container>
                </div>
                <div layout-gt-xs="row">
                    <md-input-container flex>
                        <label>Email</label>
                        <input type="email" name="email" ng-model="user.email" required/>
                        <ng-messages for="signupForm.email.$error">
                            <ng-message when="email">
                                Please give a valid email
                            </ng-message>
                        </ng-messages>
                    </ng-input-container>
                </div>
                <div layout="column" layout-gt-xs="row" layout-align="center">
                    <md-button type="submit" class="md-raised md-primary">
                        Register
                    </md-button>
                    <md-button type="button" class="md-primary">
                        Back to sign in
                    </md-button>
                </div>
            </form>
        </md-content>
    </div>
</div>

您可以看到输入被正确验证，但消息元素似乎没有在应该的时候应用正确的样式（

opacity:1

）。

您遇到了

除此之外，您还缺少

type=“email”

和

必需的消息

<input name="email" ng-model="user.email" type="email" required/>
<ng-messages for="signupForm.username.$error">
    <ng-message when="email">
        Please give a valid email
    </ng-message>
    <ng-message when="required">
        Email is required
    </ng-message>
</ng-messages>


请给我一封有效的电子邮件
电子邮件是必需的
Oops，原文是jade，显然我在编写示例时遗漏了一些东西。这个问题看起来确实像我所经历的，令人遗憾的是似乎没有解决办法。由于我省略了“必需”错误（我认为应用于空输入的错误样式已经足够明显），因此我认为现在可以对自定义错误消息使用单个
ng if
。您可以尝试在
ng messages
元素上将
ng show/hide
与
md auto hide=“false”
组合。在
md输入容器上也有
md is error=“CONDITION”
。
<input name="email" ng-model="user.email" type="email" required/>
<ng-messages for="signupForm.username.$error">
    <ng-message when="email">
        Please give a valid email
    </ng-message>
    <ng-message when="required">
        Email is required
    </ng-message>
</ng-messages>