javascript angular ng-messages 仅在 $touched 为真时显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34324316/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular ng-messages only showing when $touched is true
提问by TyMayn
I am not doing anything too special.
我没有做任何太特别的事情。
I have an input I want validated with every key stroke. If validation fails, display the error. Do not wait for the blur event to trigger the $touched.
我有一个输入，我想在每次击键时进行验证。如果验证失败，则显示错误。不要等待模糊事件触发 $touched。
I thought this was the default case, but apparently it is not. I am using angular materials along with angular messages. I am doing this for capslock detection.
我认为这是默认情况，但显然不是。我正在使用角度材料和角度信息。我这样做是为了大写锁定检测。
The markup:
标记：
<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>
When I first come to the page, turn caps lock on, and start typing, my error message looks like so:
当我第一次进入页面时，打开大写锁定并开始输入时，我的错误消息如下所示：
{
"$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
}
}
}
So this seems to be working as expected, but the actually error message doesn't display until the blur event fires on that particular input.. So I can go in with capslock, type 10 characters, the error object says the capslock error is there, but since $touched isn't true, then it doesn't show.
所以这似乎按预期工作，但实际错误消息不会显示，直到模糊事件在该特定输入上触发..所以我可以使用大写锁定，输入 10 个字符，错误对象说大写锁定错误在那里，但由于 $touched 不是真的，所以它不会显示。
Once $touched is set to true, then I can go back into the input and everything works like expected.
一旦 $touched 设置为 true，我就可以返回输入，一切都按预期进行。
Any ideas? Thanks in advance!
有任何想法吗？提前致谢！
回答by Devner
Change
改变
<div ng-messages="primaryLogin.$error">
to
到
<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty">
You may also try
你也可以试试
<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$touched">
OR
或者
<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$pristine">
You can also club them like so for conditional AND check:
您也可以像这样对它们进行有条件的 AND 检查：
<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty && primaryLogin.login.$touched && primaryLogin.login.$pristine">
or for conditional OR check:
或有条件的 OR 检查：
<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty || primaryLogin.login.$touched || primaryLogin.login.$pristine">
Try the above one by one to find out whichever one meets your case.
一一尝试上面的方法，看看哪一个适合你的情况。
回答by sung
In Pre 1.0 version of Angular Material (i.e. <= v0.11.4), that was the case: The ng-message was displayed by default.
在 Angular Material 的 Pre 1.0 版本（即 <= v0.11.4）中，情况就是这样：默认情况下显示 ng-message。
However, the material design specstates:
但是，材料设计规范指出：
Show error text only after user interaction with a field. If the user inputs incorrect data, helper text may transform into error text.
仅在用户与字段交互后显示错误文本。如果用户输入不正确的数据，帮助文本可能会转换为错误文本。
If you want to show messages before the user's interaction, you can add "md-auto-hide='false'" to your ng-messages directive.
如果您想在用户交互之前显示消息，您可以将“md-auto-hide='false'”添加到您的 ng-messages 指令中。
<div ng-messages="primaryLogin.$error" md-auto-hide='false'></div>
I found this solution from: here
回答by Kumar Immanuel
Check with ng-show="primaryLogin.login.$invalid && primaryLogin.login.$touched". This did the trick for me.
检查与ng-show="primaryLogin.login.$invalid && primaryLogin.login.$touched"。这对我有用。
回答by Dmytro Ivashchenko
Use md-is-error exampl:
使用 md-is-error 示例：
<md-input-container md-is-error="true">
"When the given expression evaluates to true, the input container will go into error state. Defaults to erroring if the input has been touched and is invalid."
“当给定的表达式评估为真时，输入容器将进入错误状态。如果输入已被触摸且无效，则默认为错误。”
https://material.angularjs.org/1.1.3/api/directive/mdInputContainer
https://material.angularjs.org/1.1.3/api/directive/mdInputContainer
