Such the title, anyone can help me ? This is my code html
<select id="SelectTemplate">
<option hidden disabled value>View available templates</option>
<option *ngFor="let email of observableEmail | async">{{email.name}}</option>
</select>
you are close, please refer Angular doc for examples, you can try:
('yourFunc' indicates your typescript method name)
<select id="SelectTemplate" (change) = "yourFunc($event.target.value)">
<option hidden disabled value>View available templates</option>
<option *ngFor="let email of observableEmail | async" [value]="email">{{email.name}}</option>
</select>
Related
I'm trying to use a placeholder for dropdowns in the select tag, but the placeholder isn't working. Also, I tried some other options, but they didn't work.
<select class="form-control" [(ngModel)]="Category" required placeholder="Category">
<option value="" disabled selected>Select one category </option>
<option *ngFor="let data of array" [value]="data.Value">{{data.Name}}</option>
</select>
I have a select tag where I remove the [(ngModel)]="Category" properties and it shows the placeholder option, but when I add them it shows Blank in Placeholder.
In TS File declare your [(ngModel)] as null, it will work,
I have attached the stackblitz demo as well.
You can use an option with disabled.
In TS:
selected4 = null;
HTML
<select [(ngModel)]="selected4">
<option value="" disabled selected>Select your option</option>
<option value="1">Hey</option>
<option value="2">Hello</option>
</select>
stackblitz
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 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
I have a simple problem but i don't find a solution
I have this select:
<select name="projectObjectUpdate" [ngFormControl]="_projectAmountForm.controls['projectObject']"
class="form-control form-control-select2-field">
<option *ngFor="let object of _projectObjectList" [ngValue]="object" [attr.selected]="object.id === _projectAmountForm.controls['projectObject'].value.id ? true : null">
{{object.descriptions[_user.language]}}
</option>
</select>
In the HTML code, good option is selected
but nothing is selected on screen
anyone knows the problem ?
You also could just bind ngModel on your select element.
<select name="projectObjectUpdate" [ngModel]="_projectAmountForm.controls['projectObject'].value.id" [ngFormControl]="_projectAmountForm.controls['projectObject']"
class="form-control form-control-select2-field" >
<option *ngFor="let object of _projectObjectList" [ngValue]="object" >
{{object.descriptions[_user.language]}}
</option>
</select>
This will always select the option element with the same value as _projectAmountForm.controls['projectObject'].value.id
EDIT:
Sorry, yes ngValue was wrong! I meant ngModel. Corrected.
Try binding to the [selected] attribute, like that:
<option *ngFor="let object of _projectObjectList" [ngValue]="object" [selected]="object.id === _projectAmountForm.controls['projectObject'].value.id">