I'm trying to make a dropdown selector with Angular 2. I have an array of items and they all get displayed just fine and the two way data binding works. My only problem is that the dropdown selector has no default value. The selector field is empty when I load the page. The selector is in a edit view of my application, thats why I want to match the default value with the value of the "entityToEdit.cluster.id" object. Can anyone help me out with this?
<select [(ngModel)]="entityToEdit.cluster"
name="clusterSelector">
<option *ngFor="let data of clusterData" [ngValue]= "data">
{{data.id}}
</option>
</select>
Just set the default value on ngOnInit
ngOnInit() {
this.entityToEdit.cluster ="defaultval";
}
Since you plan to show the selected id you should be setting the id as the ngmodel.
<select [(ngModel)]="entityToEdit.cluster['id']"
name="clusterSelector">
<option *ngFor="let data of clusterData" [ngValue]= "data.id">
{{data.id}}
</option>
</select>
Related
In the HTML, I got something like this for select.
What it's doing is the default value showing for the select dropdown is Select year but it cannot be selected.
<select>
<option disabled hidden selected>
Select Year
</option>
<option value="2021">2021</option>
</select>
But when I implement it in React.
It giving me this error
Use the defaultValue or value props on instead of setting selected on .
But when I use default value or value the SELECT YEAR option is not there anymore.
All you need is to remove both selected and disabled attributes from first <option>:
<select>
<option hidden>Select Year</option>
<option value="2021">2021</option>
</select>
Here's why:
<select> is shorthand for <select defaultValue={undefined}>, which makes the first <option> with a value of undefined get selected. In your case, that's the first <option>, since it doesn't have a set value, which is equivalent to having a value set to undefined.
Probably the most important bit is removing disabled. Remember this is JSX, not HTML. JSX is used by React to create valid HTML. If you specify disabled attribute, React won't allow that <option> to be selected, regardless of method.
But you want that <option> selected by default, so it doesn't make sense to disable it.
You only want the user not to be able to select it, which is exactly what the hidden attribute does.
Working demo.
I'm developing a web application using Angular 6. I used the library bootstrap-select to implement a combo-box (with additional possibilities to customize). I have a problem: when I set the multiple attribute, graphically the behavior is right (all the selected strings appear inside the input box, together). The problem is that the value connected with my ngModel (used to get the data with 2-way binding) it's always only one (and always corresponds to the first value displayed inside the box, although there are other values in it!). This is the code:
<select
class="form-control selectpicker show-tick"
data-width="200px"
multiple
title="my_title"
name = "name"
[(ngModel)] = "value"
(ngModelChange) = "onChange($event)"
>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="2">Value 3</option>
</select>
This is the result (graphically it's exactly as I would like):
But, as you can see, with each click to add a new value, the value object is always and only associated with 1 (because Value 1 is the first in the list and doesn't seem to matter that the other two values are present). The console log (object value):
How can I solve this problem?
The problem is that you are using a multi select version for jquery. You could do some tricks to make it work, but it will not be quite elegant
Also why use jquery in angular? You always have to try to avoid it
Angular handles the bindings in another way.
I recommend you use this library ng-select
Demo
Look a this:
<label>Business unit</label>
<select name="BU" class="form-control" [(ngModel)]="interventionForm.DLCODBUN">
<option *ngFor="let item of buList" >{{item.id}}</option>
</select>
When I open the relative web page, the select box show a default value ( the first of the list ) , but that's only a view binding.
here's the image
Infact, if i go on with in the application, the variable bound with [(ngModel)] will be undefined.
Only with a selection on the select box interventionForm.DLCODBUN will be populated, but i want the same thing with the default value!
isn't strange? Someone know a workaround?
Assign interventionForm.DLCODBUN this with the default value in your component.ts . Then it will appear in the select box as well and you will have the value in component.ts . You will not get the assigned value until you change something from drop down , so best option is assign a default value already in the component.ts
Maybe it caused by missing the ngValue attribute in the option tag.
Try to add item value to the option tag, it may work.
<option *ngFor="let item of buList" [ngValue]="item.value">{{item.id}}</option>
I have two <select> elements:
<select [(ngModel)]="model.SelectedSomeValue">
<option *ngFor="let someValue of model.SomeValues">{{ someValue }}</option>
</select>
<select [(ngModel)]="model.SelectedSomeValue.SelectedOtherValue">
<option *ngFor="let otherValue of model.SelectedSomeValue.OtherValues">{{ otherValue }}</option>
</select>
It seems that you can't bind the second <select> to model.SelectedSomeValue as it never populates correctly. It contains the value, although by specifying [value]="value" one would expect that the object reference is stored but that's not the case. So how can we do a binding between two <select> elements?
If I understand your question, you want one selector to choose a category and a second selector to choose the options within the category? So if you change selector 1, then you would get a different list of items in selector 2?
If so, then check this Plunker: https://embed.plnkr.co/UErCcJeX5ply1BXSjweY/
There was a bug in the beta releases that prevented ngModel from working on some browsers so make sure you upgrade at least to RCs (the plunker is RC5).
Essentially, the code is this:
<p><select [(ngModel)]="selected">
<option value=""></option>
<option *ngFor="let datum of data" [ngValue]="datum">{{datum.name}}</option>
</select>
<p><select [(ngModel)]="selected2">
<option *ngFor="let val of selected?.value" [ngValue]="val">{{val}}</option>
</select>
And the component has a list of objects in data and a place to store the selected values in selected and selected2. The first selector uses data to display options (and stores the object with the subcatagories as the option value) and is bound to the selected variable. The second second selector gets uses the selected.values to create options, and stores the selection in selected2.
<select ng-model="field.value" class="form-control" ng-attr-name="{{name}}">
<option selected="selected">{{field.fieldName}}</option>
<option ng-repeat="app in field.attributes.split(',')" value="{{app}}">{{app}}</option>
</select>
In this code, my expected behaviour is , it will show the select box and it select the first option I have added selected="selected".
but it not selecting that "selected" attribute element.
I have tried this with ng-selected="true" also. It also not help for me. any suggestion for me?
You should be using the ngOptions directive - not a ngRepeat on an option element:
<select ng-model="field.value" ng-options="app as app for app in field.attributes.split(',')" class="form-control" ng-attr-name="{{name}}"></select>
Now simply set your ngModel (field.value) to the field you want selected.