Non-string values from form controls in Angular2 - javascript

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.

Related

Angular 2 Two way binding with [disabled]

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

Selected Value in dropdownList using Jquery does not appear after set it

I have a problem with asp:dropdownlist when I try to change selected value to some thing using jquery after set the value, dropdownlist shows me last value and does not update to new selected value that have been set by me.
I try it(my html code)
<select name="ctl00$cphMain$ddlBankList" id="ddlBankList">
<option value="2">a</option>
<option value="67">b</option>
<option value="85">c</option>
<option value="175">d</option>
<option value="84">e</option>
<option value="86">f</option>
</select>
and to modify html i use this js
$("#<%=ddlBankList.ClientID%> option:selected").removeAttr("selected");
$("#<%=ddlBankList.ClientID%> option[value='67']").attr('selected', 'true');
But dropdownlist does not Jump to 67 value.
use this
$("#ddlBankList").val(67);
JSFIDDLE
You can use Jquery val function directly for select option in dropdown.
$("#<%=ddlBankList.ClientID%>").val('67');

AngularJS blank default in select

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.

how to use a different value from that selected in a drop down

I'm trying to figure out how (if possible, which I'm sure I can) to use a different value to that selected in a drop down box in HTML. Happy to use jQuery or JavaScript. So for example I have a series of dropdowns as follows:
<select id="country" title="Country">
<option>Argentina ARG</option>
<option>Australia AUS</option>
<option>Austria AUT</option>
<option>Austria AUT</option>
<option>Belgium BEL</option>
<option>Brazil BRA</option>
<option>Canada CAN</option>
</select>
Naturally when a user chooses say 'Brazil' the option displays 'Brazil BRA'. However, I would like to instead use the value 'BRA' is it possible to do this? Am I just being dumb and it can be done in plain HTML?
<option value="BRA">Brazil BRA</option>
Side note: I believe IE6 needs that value or things get funky onsubmit.
Use the value attribute: http://www.w3schools.com/tags/att_option_value.asp
<select id="country" title="Country">
<option value="ARG">Argentina</option>
<option value="AUS">Australia</option>
</select>
You can use the options value-attribute. This way the text that is shown to the user is Argentina ARG, but the value that is posted with the form is just ARG.
<select id="country" title="Country">
<option value="ARG">Argentina ARG</option>
<option value="AUS">Australia AUS</option>
...
</select>

jQuery val() on HTML Select Text takes precedence over Value

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

Categories