Нг-сообщения не отображают ошибки проверки должным образом

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>