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
Related
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.
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 "".
I am using angular-unsaved Changes directive as well as the angular built in form controller to detect if a form is $dirty.
I have a form on a specific page that even though I edit elements, the form never registers as dirty. I have gone so far as to strip everything and leave only:
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" id="thematiff" class="form-control" >
</form>
The formis never $dirty even when I change the value of the input. Any ideas what the problem could be causing the changes to input not to be detected? Is it that there should be an angular input equivalent tag instead of a plain old "input"?
What could be disabling the detection?
Ng-model is missing on your input field.
Validations and all form enhancements are provided by utilizing ng-model directive (and its controller). So add ng-model and everything is Ok.
See: http://jsbin.com/podepo/edit?html,output
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" ng-model="whatever" >
<pre>{{WHAT|json}}</pre>
</form>
i am new in angular and trying to learn it.
https://scotch.io/tutorials/angularjs-form-validation
https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages
i was reading article on form validation by angular js and i stumble in few area which i would like to discuss here.
1) what is difference between $pristine and $dirty. both looks same.
2) need to understand $touched? what it does ?
3) see the below code
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
</div>
<!-- USERNAME -->
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
</div>
for first one ng-model="name" and second one ng-model="user.username"
why some time only property name declared for ng-model and why some time we have to write username dot property name ?
4) <input type="email" name="email" class="form-control" ng-model="email">
type="email" is anything specific to angular or html5?
5) <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
they check $invalid and $pristine. can they use $invalid and $dirty instead of $pristine here ?
6) see the code
angular
.module('app', ['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl() {
}
are they injecting other directive into app module....this is the way to inject
.module('app', ['ngMessages'])
please see my points and guide me with answer for my each points if possible. your answer would help me to understand and learn angular js.thanks
1) $pristine is for indicating that the field has not been modified, whereas $dirty is for telling it has been modified.
$pristine: It will be TRUE, if the user has not interacted with the form yet.
$dirty: It will be TRUE, if the user has already interacted with the form.
2) $touched tells you whether the user has merely been there/visited.
$touched: True if control has lost focus.
3) because for ng-model="name", name property is directly bound to $scope, and for ng-model="user.username", user is bound to $scope and user has a property username.
Think of it as:- user is an object and username is its property.
4) Not sure, but i think not anything specific.
5) Yes
6) Yes here you are injecting ngMessages in your angular module
$pristine is the inverse of $dirty.
The documentation says: A model is considered to be touched when the user has first focused the control element and then shifted focus away from the control (blur event)..
Because some time you want to bind the control to a variable in the scope, and sometimes you want to bind it to a field of an object that is in the scope. The latter is recommended. In particular, the former causes problems when used inside a directive (like ng-if or ng-repeat) that has its own scope, because it would set the field in the child directive scope instead of the controller scope. As a rule of thumb, always use the latter, and always initialize the object (i.e. user) in the controller.
it's both. It's specified in the HTML5 spec, and angular validates that the entered string is indeed a valid email address.
yes, since $dirty is the inverse of $pristine
That doesn't inject anything. 'ngMessages' is the name of a module. This declaration says that the module 'app' depends on the module 'ngMessages'. So all the directives, services, controllers and filters defined in the ngMessages module will be available in the app module.
I am trying to disable an input based on a boolean value from a checkbox selected in the form. Sadly this doesn't work -
<input type="number" ng-model="data.age" ng-attr-disabled={data.checked ? 'disabled'}>
How to fix this?
Looking for a pure Angular solution.
Is there a need to use ng-attr-disabled. The simplest option would be to use ng-disabled with your boolean value
<input type="number" ng-model="data.age" ng-disabled="data.checked">
You have also not provided enough information to determine whether the data.checked variable is being correctly set or even exists.