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">
Related
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>
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>
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>
vatCodeList is an error with string codes.
Example: ['34u' , '23' ,'tt']
Need to set the selected value there .
<select class="custom-select" formControlName="vatCode">
<option *ngFor="let i of vatCodeList">{{i}}</option>
</select>
Inside your *.component.ts
public vatCode: any;
Inside your *.component.ts you can set the value of vatCode to one of the values contained within vatCodeList, this will update the selected value.
Inside the *.component.html
<select class="custom-select" formControlName="vatCode" [(ngModel)]="vatCode">
<option *ngFor="let i of vatCodeList">{{i}}</option>
</select>
You can bind the value property like this
<option [value]="i" *ngFor="let i of vatCodeList">{{ i }}</option>
You can try to put an expression to the option tag to make an option selected
<select class="custom-select" formControlName="vatCode">
<option *ngFor="let i of vatCodeList" {{i == vatCode?'selected':'' }}>{{i}}</option>
</select>
The variable should reference the value of the InputControl. Using reactive forms it would be easy to extract the value and put it into expression.
The easiest way to bind the element to the model with ngModel but you can check if this solution helps.