Question

我使用角度材质创建了一个基本形式，并希望在输入无效时弹出特定的错误消息。我试图在官方网站input example之后对其进行建模，该网站使用ng-messages指令来显示验证错误。无论出于何种原因，只有在验证状态从有效状态转换为无效状态时才会显示错误消息。

例如，有一个像<input type="email" required>这样的输入，其中<ng-message when="email">表示“请输入有效的电子邮件”。编写无效的电子邮件然后切换到下一个值会触发验证，无效的样式将应用于输入并显示消息。如果相反，我立即进入下一个输入而不输入任何内容，元素也会获得应用的无效样式（因为required属性）并且没有按预期显示消息（我没有为required添加一个消息）。但是，如果我再次关注输入并写入无效的电子邮件，则消息不会显示（即使我将焦点移开并返回）。但是，input元素仍然具有应用于它的无效样式。当我写一封无效的电子邮件（导致无效的样式从元素中删除）然后将其删除以使其再次无效时，该消息才会再次显示。

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>

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

1 个答案: