I have the following code:
component.html:
<select id="select" (change)="updateValue(this.value)">
<option *ngFor="let option of filteredOptions" value="{{option .Id}}"></option>
</select>
component.ts:
updateValue(value: number){
this.value= value;
}
I can get the value of the select using jQuery or vanilla JS by selecting by ID.
Question
How can I pass in the value of the select using Angular?
For two-way binding, the [(ngModel)]="value" binding is missing. Try the following:
<select id="select" [(ngModel)]="selectedvalue">
<option *ngFor="let option of filteredOptions" value="{{option .Id}}"></option>
</select>
Now you can use the "selectedvalue" in your component.
For one-way binding, use $event.value. Try the following:
<select id="select" (change)="updateValue($event.value)">
<option *ngFor="let option of filteredOptions" value="{{option .Id}}"></option>
</select>
Demo: https://plnkr.co/edit/zxiDsiMg9GFA6nRxr5ly?p=preview
I solved it
<select id="select" (change)="updateValue($event.target.value)">
<option *ngFor="let option of filteredOptions" value="{{option .Id}}" class="select-option"></option>
</select>
Related
here my code
<select class="form-control"
aria-placeholder="select auth type" id="auth_type"
[(ngModel)]="authenticationType"
name="auth_type"
#auth_type="ngModel"
(change)="changeAuthenticationType($event)" required>
<option [ngValue]="undefined" disabled selected>{{'AUTHENTICATION_CONFIGURATION.SELECT_TYPE' | translate}}
</option>
<option value="ALIGNOR_AUTHENTICATION">ALIGNOR AUTHENTICATION</option>
<option value="COGNITO_AUTHENTICATION">COGNITO AUTHENTICATION</option>
</select>
You have not done it by the recommended way of doing it.
Refer this demo code to see how it done. I would recommend to do it this way.
<select [(ngModel)]="selectedItem">
<option *ngFor="let item of items" [ngValue]="item">{{item.value}}</option>
</select>
You can make changes in your code accordingly.
I am working on angular 9 and whenever list on which select it working is changed it selects first element by default. I am using materializecss for this. I tried jquery and compareWith but no use.
<select id="valueSelect"
data-[(ngModel)]="selectedValue"
[compareWith]="compareList"
data-(change)="fetchMetaData();">
<option value="" disabled selected>Choose value</option>
<option data-*ngFor="let element1 of filterList"
data-[ngValue]="bu.businessunitCode">{{element1.value}}</option>
</select>
<label>Select value</label>
may i show fetchMetaData() function ?
replace [ngValue] to [value] may be it will work fine !
<select id="valueSelect"
[(ngModel)]="selectedValue"
[compareWith]="compareList"
(change)="fetchMetaData();">
<option selected disabled>Choose value</option>
<option *ngFor="let data of fadeIn" [value]="data">{{data}}</option>
</select>
i made a Select with dynamic values using ngModel directive and the Bootstrap Framework, it works. My problem is that i want to add a placeholder, but the ng directive seems to ruining it.
Here is what i have:
<select [(ngModel)]="usuario.pais" name="s" class="form-control">
<option value="">Select a Country</option><!--My PlaceHolder-->
<option *ngFor="let pais of paises" value="pais.codigo">{{pais.nombre}}</option>
</select>
Any suggestions?
Maybe try this:
In TS:
public usuario = {pais: ''};
public paises = [{nombre: 'la France', codigo: 'fr'}, {nombre: 'deutscheland', codigo: 'de'}];
in HTML:
<select [(ngModel)]="usuario.pais" name="s" class="form-control">
<option value="">Select a Country</option>
<option *ngFor="let pais of paises" [value]="pais.codigo">
{{pais.nombre}}
</option>
</select>
I have a select HTML element in an Angular ngFor loop:
<select formControlName="type" required>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
In Internet Explorer, the first item in the list is selected when the template loads, but it's value isn't set in the form control, so causes a 'required' validation error until another value is selected in the list. I want to have a 'Please select' option that has a null value to prevent this happening.
This is for Angular 2+ used with or without TypeScript
Add an option like so:
<option [ngValue]="null">Please select</option>
So your control will look like:
<select formControlName="type" required>
<option [ngValue]="null">Please select</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
This works as Angular inspects the value attribute because of the square brackets. The value becomes a true null, unlike if we used value="" (this is just an empty string and doesn't match null).
In case you're not using ngForm, another approach to implementing the selected value is to do something like [value]='selectedType' (change)='selectedType = $event.target.value' in your select tag. For example:
In your component.ts:
public selectedType: string;
In your component.html
<select [value]='selectedType' (change)='selectedType = $event.target.value'>
<option value=''>-- Select your Type --</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
component.ts
public selectedValue = 'None';
component.html:
<div ">
<label>Highlight</label>
<select [(ngModel)]="selectedTrunk" (change)="onChangeTrunk($event)">
<option value='None'>None</option>
<option *ngFor="let trunklist of DRLNameTrunkList" [selected]="trunk" [value]="trunklist.SIPTRUNKNAME">{{trunklist.SIPTRUNKNAME}}</option>
</select>
</div>
This is my code pelase modify as per your requirements
is there any reason why this simple code won't work? I'm trying to have a placeholder on my select, but it simply shows as one of the other options in the list.
<div *ngFor="let d of formDatiRichiesta" class="form-row">
<select *ngIf="d.type=='select'"
class="form-control"
name="{{d.name}}"
[(ngModel)]="model[d.name]"
required>
<option selected disabled>{{d.placeholder}}</option>
<option *ngFor="let b of elencoBanche" value="{{b.id}}">{{b.denominazione}}</option>
</select>
</div>
I'm using angular4. Thanks.
--EDIT--
I found out that if I delete [(ngModel)]="model[d.name]" all works fine. Any hint?
You have to set the value of the <option> to the value of the model, because the <select> will use the value of the model as the default selection.
When the model is undefined at the beginning you can do it like this:
<option value="undefined">Please choose...</option>
That's how it is supposed to work. With the attributedisabled you can't choose it as an option.
But you could add the hidden attribute to also hide it:
<option value="" selected disabled hidden>{{d.placeholder}}</option>
<select formControlName="value" class="form-control"
style=" height: 40px">
<option [ngValue]="null" selected disabled hidden>Select</option>
<option>Save</option>
<option>Download</option>
</select>
Add this simply it will work.
<option value="" disabled>Select Category</option>
Or
<option [ngValue]="null">Select Category</option>