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.
Related
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
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.
In Angularjs, binding input select to the model creates new empty option
<option value="? undefined:undefined ?"></option>
And this is the code
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
Is this normal? It doesn't seem to be something good looking.
Make sure you have initialized your model variable with one of the option value.
Try this
Controller
$scope.hotspot = {};
$scope.hotspot.category = "Culture";
HTML
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
is it possible use the value binding on a select that contains static options like this?
<select data-bind="value: optionValue">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Actually the bind is writing the value, if I select an option the value will change, but I am not able to read it when the select is initialized. When the page is loaded the first option is always setted.