ng-messages 未正确显示验证错误

Question

我已经使用角度材料制作了一个基本表单，并且希望在输入无效时弹出特定的错误消息。我尝试在官网上的input example之后对其进行建模，它使用ng-messages指令来显示验证错误。无论出于何种原因，似乎只有在验证状态从有效转换为无效时才会显示错误消息。

例如，<input type="email" required> 之类的输入带有 <ng-message when="email">，上面写着“请输入有效的电子邮件”。写一封无效的电子邮件，然后跳到下一个值触发验证，无效的样式被应用到输入并显示消息。相反，如果我在不输入任何内容的情况下立即进行下一个输入，则该元素也会应用无效样式（因为 required 属性）并且没有消息按预期显示（我没有为 required 包含一个）。但是，如果我再次关注输入并写一封无效的电子邮件，则消息不会显示（即使我将焦点移开并移回）。但是，输入元素仍然应用了无效样式。只有当我写了一封无效的电子邮件（导致从元素中删除无效样式）然后将其删除以使其再次无效时，该消息才会再次显示。

Here 是一个示例 CodePen，它显示了他的行为，并显示了表单属性的值。标记是：

<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>

javascript不过是

angular.module("TestApp", ["ngMaterial", "ngMessages"]);

您可以看到输入得到了正确验证，但似乎消息元素没有应用正确的样式 (opacity: 1)。

Answer 1

你遇到了https://github.com/angular/material/issues/6443。

除了您缺少type="email" 和required 错误消息。

<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>