ng-сообщения неправильно отображают ошибки проверки

Я сделал базовую форму, используя угловой материал, и хотел бы, чтобы определенные сообщения об ошибках появлялись, когда ввод недействителен. Я попытался смоделировать его по примеру ввода на официальном сайте, где используется директива 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), когда они должны.


angularjs angular-material ng-messages
person JaredL    schedule 19.01.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы столкнулись с 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>
person kuhnroyal    schedule 19.01.2016
comment
К сожалению, оригинал был в нефрите, и, видимо, я упустил несколько вещей, когда писал пример. Эта проблема действительно похожа на то, что я испытываю, облом, что, похоже, нет решения. Поскольку я опускаю требуемые ошибки (я думаю, что стиль ошибки, примененный к пустому вводу, достаточно очевиден), я думаю, что сейчас могу просто использовать один ng-if для пользовательских сообщений об ошибках. - person JaredL; 19.01.2016
comment
Вы можете попробовать объединить ng-show/hide с md-auto-hide="false" в элементе ng-messages. Также есть md-is-error="CONDITION" на md-input-container. - person kuhnroyal; 19.01.2016