I am using chrome 65 version there the dropdown ng-model works perfectly
but in the chrome 71 version the ng-model malfunctioning it's not set the option value in ng-model .
<select class="btn dropdown-toggle btn-info" ng-model="action" ng-click="disburseMenuEvent(action)">
<option data-icon="fa-glass icon-success" value=""> SELECT </option>
<option data-icon="fa-glass icon-success" ng-repeat="actn in Action" ng-value="{{actn.Id}}" >
{{actn.action}}</option>
</select>
You need to replace this:
...ng-value="{{actn.Id}}" >
with this:
...ng-value="actn.Id" >
Inside an ng-xxx attribute, the {{}} markup is not required.
You need to set value for each option. Then it'll apply to the "action" when it is selected.
<select name="state" ngModel>
<option value="" disabled>Choose a state</option>
<option *ngFor="let state of states" [ngValue]="state">
{{ state.abbrev }}
</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 have following select tag code in angular 7
<select class="form-control fixed-select" name="country" #country=ngModel
[(ngModel)]="employeeObject.address.country.id" (change)="onCountrySelect($event.target.value, false)"
required>
<option value="" selected disabled>Select country</option>
<option *ngFor="let country of countries" value={{country.id}}>{{country.countryCode}}</option>
</select>
Default selection is not working even I used SELECTED attribute.
How to solve this?
Your variable country must be have empty string as value to match with your option.
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>
I am trying to have a select drop down display the first option as a placeholder value
The following code works
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select>
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
however the following code does not
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select
[ngModel]="city">
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
which leads me to believe I am using the ngmodel incorrectly.
Can I have some guidance please.
It should be,
Change
From
<select [ngModel]="city">
To
<select [(ngModel)]="city">