Я не делаю ничего особенного.

У меня есть ввод, который я хочу подтвердить с каждым нажатием клавиши. Если проверка не пройдена, отобразите ошибку. Не ждите, пока событие размытия вызовет прикосновение к $.

Я думал, что это случай по умолчанию, но, видимо, это не так. Я использую угловые материалы вместе с угловыми сообщениями. Я делаю это для обнаружения capslock.

Разметка:

<form name="primaryLogin" novalidate>
    <md-content layout-padding layout="column">
        <md-input-container flex>
            <label>Login ID</label>
            <input type="text" required="" name="login" ng-model="primary.loginID" capslock>

            <div ng-messages="primaryLogin.$error">
                <div ng-message="required">
                    Please enter a Login ID.
                </div>

                <div ng-message="capslock">
                    Caps Lock is ON!
                </div>
            </div>

            <pre>{{ primaryLogin | json }}</pre>

        </md-input-container>

    </md-content>
</form>

Когда я впервые захожу на страницу, включаю заглавные буквы и начинаю печатать, мое сообщение об ошибке выглядит так:

{
  "$error": {
    "capslock": [
      {
        "$viewValue": "Q",
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": false,
        "$touched": true,
        "$pristine": false,
        "$dirty": true,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "capslock": true
        },
        "$name": "login",
        "$options": {
          "debounce": 100,
          "updateOnDefault": true
        }
      }
    ]
  },
  "$name": "primaryLogin",
  "$dirty": true,
  "$pristine": false,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "login": {
    "$viewValue": "Q",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": false,
    "$dirty": true,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "capslock": true
    },
    "$name": "login",
    "$options": {
      "debounce": 100,
      "updateOnDefault": true
    }
  }
}

Таким образом, похоже, что это работает, как и ожидалось, но на самом деле сообщение об ошибке не отображается до тех пор, пока не сработает событие размытия на этом конкретном входе. Поэтому я могу войти с capslock, введите 10 символов, объект ошибки говорит, что ошибка capslock есть , но поскольку $ touch не соответствует истине, он не отображается.

Как только для $ touch установлено значение true, я могу вернуться к вводу, и все работает как ожидалось.

Любые идеи? Заранее спасибо!

14
TyMayn 17 Дек 2015 в 02:48

4 ответа

Лучший ответ

+ Изменить

<div ng-messages="primaryLogin.$error">

К

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty">

Вы также можете попробовать

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$touched">

ИЛИ

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$pristine">

Вы также можете записать их в клуб как и для условного И проверить:

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty && primaryLogin.login.$touched && primaryLogin.login.$pristine"> 

Или для проверки условного ИЛИ:

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty || primaryLogin.login.$touched || primaryLogin.login.$pristine">

Попробуйте приведенное выше одно за другим, чтобы выяснить, какой из них соответствует вашему делу.

21
Devner 21 Янв 2016 в 08:36

Используйте пример md-is-error:

<md-input-container md-is-error="true">

«Когда данное выражение оценивается как true, контейнер ввода перейдет в состояние ошибки. По умолчанию используется ошибка, если ввод был затронут и недействителен».

https://material.angularjs.org/1.1.3/api/directive/mdInputContainer

1
Дмитрий Иващенко 6 Апр 2017 в 13:23

В версии Angular Material до 1.0 (т. Е. <= V0.11.4) это имело место: сообщение ng отображалось по умолчанию.

Однако спецификация дизайна материала гласит:

Показывать текст ошибки только после взаимодействия пользователя с полем. Если пользователь вводит неверные данные, вспомогательный текст может трансформироваться в текст ошибки.

Если вы хотите показывать сообщения до взаимодействия с пользователем, вы можете добавить "md-auto-hide = 'false'" в вашу директиву ng-messages.

<div ng-messages="primaryLogin.$error" md-auto-hide='false'></div>

Я нашел это решение по адресу: здесь.

4
sung 25 Янв 2016 в 23:38

Проверьте с ng-show="primaryLogin.login.$invalid && primaryLogin.login.$touched". Это помогло мне.

1
Kumar Immanuel 19 Дек 2016 в 10:30