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.
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.
Once $touched is set to true, then I can go back into the input and everything works like expected.
Any ideas? Thanks in advance!
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:
<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty && primaryLogin.login.$touched && primaryLogin.login.$pristine">
or for conditional OR check:
<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.