ng-messages无法正确显示验证错误

Question

我使用角形材料制作了一种基本形式，并希望在输入无效时弹出特定的错误消息。 我尝试在官方网站上的输入示例之后对其进行建模，该示例使用ng-messages指令显示验证错误。 无论出于何种原因，仅当验证状态从有效转变为无效时，才会显示错误消息。

例如，存在诸如<input type="email" required>的输入，其中带有<ng-message when="email">为“请输入有效的电子邮件”。 编写无效的电子邮件，然后跳至下一个值将触发验证，无效的样式将应用于输入并显示消息。 相反，如果我立即继续进行下一个输入而不输入任何内容，则该元素也会获得应用的无效样式（由于required属性），并且没有按预期方式显示任何消息（我没有包含required ）。 但是，如果我再次集中输入内容并编写了无效的电子邮件，则该消息不会显示（即使我将焦点移开和移开）。 但是，输入元素仍然具有无效的样式。 仅当我编写无效的电子邮件（导致从元素中删除无效的样式）然后删除它以使其再次无效时，该消息才再次显示。

这是一个示例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>