仅在$ touch为true时显示的角度ng-messages [英] angular ng-messages only showing when $touched is true
问题描述
我没有做任何太特别的事。
I am not doing anything too special.
我有一个输入,我希望每次按键都验证。如果验证失败,则显示错误。不要等待模糊事件触发$ touch。
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.
我认为这是默认情况,但显然不是。我使用角度材料和角度消息。我这样做是为了检测大写锁定。
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.
标记:
<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
}
}
}
所以这似乎按预期工作,但实际错误信息直到模糊才显示事件触发了那个特定的输入..所以我可以使用capslock,输入10个字符,错误对象说明了capsloc k错误是存在的,但由于$ touch不是真的,所以它没有显示。
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.
一旦$ touch设置为true,那么我可以回到输入和一切都像预期的那样。
Once $touched is set to true, then I can go back into the input and everything works like expected.
任何想法?提前致谢!
推荐答案
更改
<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">
OR
<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$pristine">
你也可以像这样对他们进行有条件的检查:
You can also club them like so for conditional AND check:
<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty && primaryLogin.login.$touched && primaryLogin.login.$pristine">
或有条件的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.
这篇关于仅在$ touch为true时显示的角度ng-messages的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!