我没有做任何特别的事情。
我有一个输入,我想在每次击键时进行验证。如果验证失败,则显示错误。不要等待模糊事件触发 $touched。
我以为这是默认情况,但显然不是。我正在使用 Angular Material 和 Angular 信息。我这样做是为了大写锁定检测。
标记:
<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
}
}
}
所以这似乎按预期工作,但实际上错误消息不会显示,直到模糊事件在该特定输入上触发。所以我可以使用大写锁定,键入 10 个字符,错误对象显示大写锁定那里有错误,但由于 $touched 不是真的,所以它不会显示。
一旦 $touched 设置为 true,我就可以返回输入,一切都按预期进行。
有什么想法吗?提前致谢!
最佳答案
改变
<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">
一项一项地尝试以上,找出符合您情况的一项。
关于javascript - angular ng-messages 仅在 $touched 为真时显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34324316/