I have an input with [disabled] depending upon the ngModel of another input. Initially [disabled] is working properly but not when we change the dependant input value, the [disabled] property is not working. How to apply two binding on [disabled] property?
Following is the code snippet.
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option value="0">Disabled</option>
<option value="0">Enabled</option>
</select>
This model isDisabled is changed correctly. I could see the value change like this in template {{isDisabled}}. But not reflected in the [disabled] property of the select box.
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>
The primary problem was you were using same value 0 for both option. But even if you change them to 1 & 0 respectively for Enable & Disable. It will not gonna work because value attribute stores values as '0'(string '0') & '1'(string 1) (in short stringify value of it).
You could easily solve this dataType issue of value by using ngValue attribute binding.
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option [ngValue]="1">Disabled</option>
<option [ngValue]="0">Enabled</option>
</select>
Plunker Demo
you need to add a name attribute to the input and make the ng-mode two-way binding by wrapping up with parenthesis also. no need to use the ngModelChange for this purpose
<select [(ngModel)]="isDisabled" name='isDisabled'>
<option value="0">Disabled</option>
<option value="1">Enabled</option>
</select>
<select [(ngModel)]="userInput" [disabled]="isDisabled == '0'" name='userInput'>
<option value="test">Test</option>
</select>
In your question, both option values are 0.
You'll want to ensure that one is true, with the other being false
Component:
component class {
myVar = false
}
Template:
<select [(ngModel)]="myVar">
<option value="true">...</option
<option value="false">...</option
</select>
<select [disabled]="myVar">
<option>...</option
</select>
Try to use true\false for [disabled] it will save your function comparator, and use 2-way binding directly.
Like:
<select [(ngModel)]="isDisabled">
<option value="true">Disabled</option>
<option value="false">Enabled</option>
</select>
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>
See Plunker
Related
I have the following multiple drop-down lists defined using select2 but the placeholders don't work?
<select class="js-select2" multiple="multiple" placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
<select class="js-select2" multiple="multiple" placeholder="Select Fruits">
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
</select>
<script>
$(".js-select2").select2({
// placeholder: 'Select an option...'
});
</script>
It only works if I define the placeholder inside the select2 option list (commented out above) but I want to use a single class to initialize all select2 multiselects drop-downs and display different placeholders.
Is it possible to achieve this?
For a quick workaround, you can pass the value of the attribute to the placeholder option:
$(".js-select2").each(function() {
$(this).select2({
placeholder: $(this).attr('placeholder')
});
});
This does not work when using $(".js-select2").select2() directly, I assume in that context this doesn’t point to the right object (or something like that). But if you use an each loop to initialize it on each element separately, it works.
https://jsfiddle.net/84whaced/
Alternatively, it should work if you use data-placeholder in the HTML (amazing what we can find out once we check the documentation, right?), see https://select2.github.io/options.html#data-attributes - https://jsfiddle.net/84whaced/1/
This would be the preferred option, I think.
It will work as:
If we just set the attr e.g. $("#state").attr('data-placeholder', 'Select State'), there will no effect.
However, if we set the attr and then call $("#state").select2() with no arguments, then the placeholder updates.
$("#state").attr("data-placeholder","Select State");
$("#state").select2();
You can use the data-placeholder for different placeholder for every select
$('select').select2({
placeholder: function(){
$(this).data('placeholder');
}
});
<select class="js-select2" multiple="multiple" data-placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
<select class="js-select2" multiple="multiple" data-placeholder="Select Fruits">
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
</select>
You can check the Demo as well.
Maybe you have similar ids on your page. JS'll select latest id by default. Try to change them.
The majority of select / option solutions for Angular 2 work in a way that we return the actual content, not the value attribute. However, since I'm still learning Angular 2, I want to get the actual value attribute on clicking a button. I managed to somewhat solve this issue, but I'm not sure if this is the correct approach.
Below is the example of how I'd like it to work:
<select #selectedCategory>
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">
/* This returns the selected category.name, not the value attribute. */
The solution above creates the following HTML (note the lack of value attribute on option):
<select _ngcontent-oom-3="">
<!--template bindings={}-->
<option _ngcontent-oom-3="">stuff 1</option>
<option _ngcontent-oom-3="">stuff 2</option>
<option _ngcontent-oom-3="">stuff 3</option>
</select>
The solution below actually works, however, I need an ngModel in order to make it work.
<select [(ngModel)]="selectedCategory">
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">
/* This returns the value attribute correctly; however, do I really need a ngModel for one value? */
What is the correct way to approach this situation?
Thank you for your suggestions.
As discussed in the comments, the "how I'd like it to work" example does work:
<select #selectedCategory>
<option *ngFor="#category of categories" [value]="category.id">
{{category.name}}
</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">click me</button>
Plunker
However, we must use beta.15 for this to work. See the changelog for beta.15 for more info:
select: set value individually from ngModel (e1e44a9), closes #7975 #7978
I prefer this approach since it does not add a property to the component, nor do we need to use a <form> tag (like in #Thierry's answer).
You could use a control defined inline with the ngControl directive:
<form>
<select #categoriesCtrl="ngForm" ngControl="categoriesCtrl">
<option *ngFor="#category of categories" [value]="category.id">
{{category.name}}
</option>
</select>
<button (click)="getValueFromSelect(categoriesCtrl.value)">
</form>
See this plunkr: https://plnkr.co/edit/uWUS9RaGJ34PiXTJ1kPd?p=preview.
you could do using change event call
<form>
<select #categoriesCtrl (change)='SelectedValue = categoriesCtrl.value'>
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect()">Get value</button>
</form>
Working Example https://plnkr.co/edit/dQZgSyw6uc67UNhNDlZv?p=preview
In Angular2, is there a clean way to handle a form control's value as something else than a string, for example have a <select> with options (bool) true and (bool) false?
Currently I'm using solutions that don't feel very elegant:
<select (change)="model.published = !!$event.target.value">
<option value="">No</option>
<option value="1">Yes</option>
</select>
<select (change)="model.type = $event.target.value * 1">
<option value="1">My value is (int) 1</option>
<option value="2">My value is (int) 2</option>
</select>
I'm using <select>s in my example, but I'm interested in other form controls as well.
This question was suggested as a duplicate, but I'm don't think it is one since I'm not
interested only in selects
trying to generate options dynamically
This is a known limitation in the current Angular version https://github.com/angular/angular/issues/2551
Yea just add [(ngModel)]="model.published" to the select and it'll set the value property of the <option> selected, if you add an object in the <option> like this: <option value="{{object}}"> you'll set an object, it doesn't have to be a string.
I have a select element with six options, the first being a blank option:
<select name="method-rcvd" class="form-control" ng-model="workRequest.ReceiveMethod" required >
<option value="" ng-selected="true"></option>
<option value="1">Phone</option>
<option value="2">Email</option>
<option value="3">Fax</option>
<option value="4">Mail</option>
<option value="5">Other</option>
</select>
On the scope is the object property bound to this select:
$scope.workRequest.ReceiveMethod = "";
For some reason, the select ALWAYS defaults to "Phone", instead of blank. I want it to default to blank. When I remove the model binding it works, so I know it has something to do with that, but it needs to be bound. This seems to me that it should be relatively straightforward, but I am having a very difficult time getting this simple thing working.
When I spit out the value of ReceiveMethod below the select:
Receive Method: {{workRequest.ReceiveMethod}}
It always defaults to "1". How can I get this to default to the first option, the blank option?
Thanks.
Are you setting a default value in the controller?
What happens if you set default value to 0 instead of ''?
That should work but something must be setting another value on workRequest.ReceiveMethod
I got this working by using the ng-init directive, like so:
<select name="method-rcvd" class="form-control"
ng-model="workRequest.ReceiveMethod"
ng-init="workRequest.ReceiveMethod = ''" required >
<option value=""></option>
<option value="1">Phone</option>
<option value="2">Email</option>
<option value="3">Fax</option>
<option value="4">Mail</option>
<option value="5">Other</option>
</select>
You also don't need the
ng-selected="true"
in the first (blank) option.
Take the below HTML select for an example:
<select name="selValues" id="selValues">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
If we write the following jQuery statement:
$('#selValues').val('2'); // Two will get selected
$('#selValues').val('3'); // 3 will get selected instead of 5??
Why is it like that?
Use
$("#selValues option[value='3']").attr('selected', 'selected');
Also a good article on
jQuery - Select elements - tips and tricks
The val() method gets or sets the selected text. You may want to use selectedIndex instead:
$('#selValues').get(0).selectedIndex=2;
When selecting options jQuery looks first at the value then at the text of an option. It also goes through options in order. So, $('#selValues').val('3') selects options 3 first, but right after that changes selection to option 4 (as it has the text "3"). Use a multiple select to see that in fact both options are selected
<select name="selValues" id="selValues" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
As of JQuery 1.4 this has now been made unambiguous. It will now select by value, not by text value http://jquery14.com/day-01#backwards
If you do need to still select by value then a suggested method is here