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>
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. if I create a custom component that simulates the HTML <select>, I can not make it have a default value when it is referenced by another component!
You can find the (simple) application code at the following link: stackblitz here
In this question
I asked how to set a default value when the ngModel is present (
the selected attribute of <option> doesn't work anymore!).
As you can see my input-select custom component
initialize value (value linked to the ngModel).
value: any = 'default';
Unfortunately, however, the component is displayed like this:
As you can see the console, at the press of submit, print this:
I would like this situation not to show up: I would like a combo box with a pre-selected value. I can't understand what I was wrong with this application.
You had used ngModel but did not bind with anything so Angular doesn't know what value it supposed to bind with. You should bind ngModel with property which contains the default value.
<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
<input-select
name="name"
[options]="my_options"
[(ngModel)]="value"
></input-select>
<input type="submit" value="Submit"/>
</form>
Working copy is here - https://stackblitz.com/edit/angular-qanpuu
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>
I have a dropdown list (values populated from an object) from which the value selected goes on to the next page. However if that value is selected then another property of that object should go on to the next page.
My current code is:
<select name="ElementName" class="dropdown"
id="ElementsDropDownList">
<isloop iterator="ELEMENTS">
<option value="#ELEMENTS:ElementName#"><isprint
value="#ELEMENTS:ElementLabel#">
</option>
</isloop>
</select>
I want something like :
<select name="ElementName" class="dropdown"
id="ElementsDropDownList">
<isloop iterator="ELEMENTS">
<option value="#ELEMENTS:ElementName#"><isprint
value="#ELEMENTS:ElementLabel#">
</option>
<input type="Hidden" name="extraField" id="extraFieldUUID" value="<isprint
value="#ELEMENTS:ElementValue#">">
</isloop>
</select>
Here input field inside the loop is not working.
You can't have an input element inside of a select element. It would have to be separate:
<select name="ElementName" class="dropdown" id="ElementsDropDownList">
<isloop iterator="ELEMENTS">
<option value="#ELEMENTS:ElementName#">
<isprint value="#ELEMENTS:ElementLabel#">
</option>
</isloop>
</select>
<input type="Hidden" name="extraField" id="extraFieldUUID" value="<isprint value="#ELEMENTS:ElementValue#">">
However, clearly this won't work in your case because this is outside the loop. You'd need another loop, which means every ElementValue value would be included in the form. That's... no good.
It sounds like what you're trying to achieve is to have a select with two values. It doesn't really do that, pretty much by design. I can think of two options at the moment:
Include a hidden input outside the select element as shown above, but don't set a value for it. Include the list of possible values in JavaScript (as a hash table of some sort, most likely, using the ElementName as the key). Then attach an event handler to the select element's change event which sets the hidden input value based on the newly selected value.
Or, include both values in the select as delimited strings and parse them back out to separate values on the receiving page. Maybe something like:
(I'm completely guessing on the syntax, since I don't know anything about the templating tool you're using.) Then the code on the receiving page would receive some delimited string, something like:
"SomeElement|123"
That code would then need to parse that string into its two component values.
Deos anybody know how to prevent the browser from keeping the last selected option when the client reloads the page?
The problem is that when I reload the page, it keeps the last selected option, and when I select the url in the address bar and hit Enter it will be reset.
I want the second result whicth means that I want to get the browser always reset the select box.
Please the simplest and the safest way :)
Thanks.
The autocomplete="off" attribute works on select elements as well as on input elements:
<select autocomplete="off" >
<option>1</option>
<option selected>2</option>
</select>
Just set the value in javascript. That way when the page is loaded its always initialized to the same value. Just using <option selected="selected"> won't work.
in javascript it would be something like this:
document.getElementById("selectBoxToBeReset").options[indexToBeSelected].selected = true;
and jquery helps even more:
$("#selectBoxToBeReset").selectOptions("value to be selected", true);
passing true as the second argument clears any previously selected value. Jquery select box tips.