Я не делаю ничего особенного.
У меня есть ввод, который я хочу подтвердить с каждым нажатием клавиши. Если проверка не пройдена, отобразите ошибку. Не ждите, пока событие размытия вызовет прикосновение к $.
Я думал, что это случай по умолчанию, но, видимо, это не так. Я использую угловые материалы вместе с угловыми сообщениями. Я делаю это для обнаружения 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, я могу вернуться к вводу, и все работает как ожидалось.
Любые идеи? Заранее спасибо!
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">
Попробуйте приведенное выше одно за другим, чтобы выяснить, какой из них соответствует вашему делу.
Используйте пример md-is-error:
<md-input-container md-is-error="true">
«Когда данное выражение оценивается как true, контейнер ввода перейдет в состояние ошибки. По умолчанию используется ошибка, если ввод был затронут и недействителен».
https://material.angularjs.org/1.1.3/api/directive/mdInputContainer
В версии Angular Material до 1.0 (т. Е. <= V0.11.4) это имело место: сообщение ng отображалось по умолчанию.
Однако спецификация дизайна материала гласит:
Показывать текст ошибки только после взаимодействия пользователя с полем. Если пользователь вводит неверные данные, вспомогательный текст может трансформироваться в текст ошибки.
Если вы хотите показывать сообщения до взаимодействия с пользователем, вы можете добавить "md-auto-hide = 'false'" в вашу директиву ng-messages.
<div ng-messages="primaryLogin.$error" md-auto-hide='false'></div>
Я нашел это решение по адресу: здесь.
Проверьте с ng-show="primaryLogin.login.$invalid && primaryLogin.login.$touched"
. Это помогло мне.
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.