Im using ngaria in my angularjs project and I have 3 radio buttons where each has the same ngModel and the values are different.
<label for="radio">
<input type="radio" value="a" name="someName" id="radio" ng-model="someModel"
aria-checked="false">radio one
</label>
<label for="radio2" >
<input type="radio" value="b" name="someName"
id="radio2" aria-checked="false"
ng-model="someModel">radio two
</label>
<label for="radio3">
<input type="radio" value="c" name="someName"
id="radio3"
aria-checked="false"
ng-model="someModel">radio three
</label>
when I check the source via firebug of devtools in chrome, I see that
aria-invalid is set to false on all of them. Why? I understand that it is because I have ngModel. But why is aria-invalid set to false by default?
If a field is not invalid, aria-invalid is set to false. Is the expectation that it only be set after interacting with the form? The only item I could find on this in the WAI-ARIA spec is how it relates to aria-required:
When the user attempts to submit data involving a field for which aria-required is true, authors MAY use the aria-invalid attribute to signal there is an error. However, if the user has not attempted to submit the form, authors SHOULD NOT set the aria-invalid attribute on required widgets simply because the user has not yet entered data.
I suspect the watch function controlling this is falsy at first and therefore outputting a default value of false, changed to true when that condition is truthy. We can change this, the code just has to be updated. Pull requests are definitely welcome.
Note: you can opt out of this behavior with the ngAria config if you don't want aria-invalid handled at all by configuring ariaInvalid: false.
Related
I have a registration form in my project with several inputs. I'm getting the values of those inputs and sending them to a server with a post request method. I've managed to most of the functionality correctly, though I'm struggling a little bit with the type radio input. Basically, I have a simple yes or no radio input, If the user clicks on the "yes" radio input, I want the state to be updated as true, if they select "no", then as false. I need to have the value in one state because that's how I'm passing it in the post method, so the state changes depending on the user answer. I have made a simple example of that in codesandbox. As you can see, I have a simple form with two radio type inputs, one yes and one no and I'm logging the data using react-hook-form's handleSubmit method. I'm setting the state as "true" when the "yes" input changes, so when the user clicks it and "false" when the user clicks on "no", however, when I'm logging the data, when I click on either one of those radio inputs, the state is always going to be set as "false", even If I'm clicking on "yes" radio input and I have no idea why, since I'm setting it as "true" on change. I'd appreciate any help, thank you !
Its because you set value of both inputs is same value (question state), so change each value to "true" and "false" and it should work
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="field-rain">
<input
{...register('question')}
value="true"
type="radio"
name="question"
id="yes"
/>
Yes
</label>
<label htmlFor="field-wind">
<input {...register('question')} value="false" type="radio" id="no" />
No
</label>
<button type="submit">Submit</button>
</form>
</div>
you can check in codesandbox. Hope it help!
How can I enabled ng-click on a text input even if the input is disabled?
<input type="text" ng-model="myModel" ng-click="vm.handleClick()" ng-disabled="true" />
This is impossible in fact. Each AngularJS directive has its own priority. You may notice that ngDisabled has priority 100, while ngClick set at 0. Moreover, ngDisabled required to set native input disabled attribute, because it does not support interpolation.
Speaking about native input disabled state:
If the element is disabled, it does not respond to user actions, it
cannot be focused, and the command event will not fire.
Other words - if it is disabled then it is disabled and no events are possible. Otherwise disabled directive would be meaningless.
make a wrapper and bind ng-click on it. i.e.
<div ng-click='ur_Function()'>
<input type="text" ng-model="myModel" ng-disabled="true" />
</div>
U can check in your function whether input enabled is true or false and perform accordingly
I am completely new to AngularJs. I need to make autocomplete=off for a password input.
Is autocomplete=off the only way or do we have to do it in some different way in AngularJs?
This doesn't nothing to do with AngularJS at all, but simply html.
Regarding to your statement, password fields shouldn't be autocompleting if they are set to type password, otherwise if you want to set a specific field inside a form to autocomplete off you can do it setting that property to false like this <input autocomplete="on|off">.
This can be defined at form level or at input level. In a form it would be like this:
<form action="" autocomplete="on|off">
</form>
Also you can define it in a form level, and override the behavior for some specific inputs like this:
<form action="" name="myform" autocomplete="on">
<input autocomplete="off" name="myInput" >
</form>
In the above code, in the form myform the autocomplete is on, it means all inputs (the one which allow it) will do autocomplete, but in the input myInput will not, since it overrides the form behavior.
More info can be found in The HTML autocomplete attribute
This should be sufficient:
<input type="password"
autocomplete="off"
placeholder="password"
ng-model="vc.password">
I added the autocomplete="off" just for redundancy but it seems completely unnecessary.
jsbin - https://jsbin.com/bowuxopese/edit?html,js,output
Like others, I have been looking for a good way to validate my forms with Angular without the messages being too aggressive. The closest I have gotten is checking for $dirty and $touched prior to firing the messages. Which works for most situations.
The one situation I can't figure out is when the user edits, for example, a required field. The field has text in it, is valid, dirty, and touched. The user goes back into the field to change it. They backspace what is in the input and immediately the message fires because the input is now dirty, touched, and invalid. I'd rather it "reset" at that point and reevaluate when the user blurs the input again. Give them a chance to fill in the input while it's still focused.
Make sense? Any ideas?
Thanks!
Matt
Perhaps this works:
ng-model-options="{ updateOn: 'blur' }"
Add it to your input element. I believe the validation will occur when the model is updated, this way the model gets updated on blur.
Here you can see more options for this directive: https://docs.angularjs.org/guide/forms in Custom model update triggers. And a more detailed explanations in ngModelOptions.
Let me know if it works :)
Use function on ng-blur to validate and show messages if invalid.
ng-blur="validate()"
In your controller -
$scope.validate = function(){
//Validate logic
//If invalid
//Show message logic here
}
Take a look at the ngMessages documentation:
https://docs.angularjs.org/api/ngMessages/directive/ngMessages
You have an example there that shows you how to use it:
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
I think this is the best way to do it (at least it's how I do it).
I have an input which uses typeahead but the placeholder is not being rendered. What should I do to make it show the placeholder?
I'm using "angular-bootstrap": "~0.14.0"
<input type="text" name="scheduler_name"
ng-model="appointment.scheduler_name" uib-typeahead="scheduler.name as scheduler.contact_info for scheduler in findSchedulerByName($viewValue) | limitTo:7"
typeahead-loading="loadingSchedulers" typeahead-no-results="noResults"
typeahead-on-select="setSchedulerAttributes($item, $model, $label)" class="form-control input-lg"
placeholder="(Name, Carrier, Broker or Phone)" server-error>
Screenshot:
I'd recommend stripping down your typeahead to see where the problem lies. Start with the barebones typeahead:
<input type="text" name="scheduler_name" ng-model="appointment.scheduler_name"
placeholder="(Name, Carrier, Broker or Phone)"
uib-typeahead="scheduler.name as scheduler.contact_info for scheduler in findSchedulerByName($viewValue) | limitTo:7"
See if the placeholder displays as it should. If not check to make sure you actually have a falsy value for the ng-model value.
If it does display then chances are some of the other typeahead-related directives are overwriting it. My best guess is that typeahead-no-results="noResults" or something related is triggering and causing it to set the placeholder to "".