angulartypescriptdrop-down-menuhtml-select

Reputation: 421

Angular 8 drop down selected option not showing, how come?

This question has been asked frequently. My situation is apparently different from all the others as I can't find a solution for it from the existing answers.

I have this code:

<form (ngSubmit)="getExceptions(f)" #f="ngForm">
          <div class="row">
            <div class="form-group col-xs-3 col-sm-3">
              <label class="col-form-label" for="aantal">Aantal meldingen per pagina?</label>
              <select name="selectedQuantity" id="aantal" class="form-control" ngModel>
                <option *ngFor="let option of options" [value]="option">{{option}}</option>

              </select>
            </div>
.
.
.
</form>

options is defined as:

private options: string[] = ['10', '20', '50'];

I would like to show "10" as the default selected value but whatever I do the drop down keeps showing a blank for the selected value. Clicking the drop down shows the values 10, 20 and 30. So it is filled properly.

What did I try:

<option *ngFor="let option of options" [value]="option" [selected]="option==10">{{option}}
</option>

and

<option [value]="10" [selected]="true == true">10</option>
<option [value]="20">20</option>
<option [value]="50">50</option>

and

<option [value]="10" selected>10</option>
<option [value]="20">20</option>
<option [value]="50">50</option>

It has something to do with the binding because if I remove the 'ngModel' from the select tag it shows the value I want to use as the default value (10). Sort of. I can't read the selected value anymore but the default value is showing.

I have never done anything with plunkr but will try to get an example working there and then paste a link to that in here.

Upvotes: 12

Answers (9)

Aakash Tandew

Reputation: 61

Since We just want a placeholder for our select tag why not just try a different approach.

Using disabled attribute somehow makes angular ignore it. Which then perfectly works as placeholder.

<select class="form-select" name="NAME" ngModel>
   <option value="" disabled selected>Select text</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

Upvotes: 6

Saad Abbasi

Reputation: 853

I had the same issue default selected value was not showing in angular reactive form but after implementing property binding issue was fixed. hope that this will help someone.

<option [ngValue]="null" [selected]="true">Select Account Type</option>

Upvotes: 0

Radu Linu

Reputation: 1271

I've had this issue because there was a difference between the name and [(ngModel)] values.

Here is the working code:

<select id="nodeKpiDataType" name="nodeKpi.dataType" [(ngModel)]="nodeKpi.dataType">
  <option *ngFor="let kpiType of kpyDataTypes" [value]="kpiType">{{ kpiType }}</option>
</select>

Upvotes: 0

asim shahzad

Reputation: 1

If you are doing model binding, just the option like that your model:

    export class MyModel
    {
       public field1: number = 0;
    }

    <select [(ngModel)]="myModel.field1">
      <option value="" > your value 1 < /option >
      <option value="">your value 2</option>
    </select>

So the trick is that you need to set the default value in your model which is zero set in the field1 in above model and will set the value1 as selected option

Upvotes: 0

Milind Yadav

Reputation: 21

You can use ngModel for select with default value in one variable assigned to it as -


    <select name="selectedQuantity" id="aantal" 
      class="form-control" [(ngModel)]="selectedOption">
      <option *ngFor="let option of options" [value]="option">
           {{option}}
           </option>
     </select>

and value will be is as - selectedOption: string = '10';

Upvotes: 1

Muhammed Albarmavi

Reputation: 24472

try like this [ngModel]="10"

<select name="selectedQuantity" id="aantal" class="form-control" [ngModel]="10">
   <option *ngFor="let option of options" [value]="option">{{option}}</option> 
</select>

demo 🚀

Upvotes: -1

Adrita Sharma

Reputation: 22203

Try setting ngModel like this:

.ts

  private options: string[] = ["10", "20", "50"];
  selectedQuantity = "10";

.html

<select name="selectedQuantity" id="aantal" class="form-control" [(ngModel)]="selectedQuantity">
    <option *ngFor="let option of options" [value]="option" >{{option}}</option>
</select>

Working Demo

Upvotes: 26

siddharth shah

Reputation: 1147

use like below

<option [value]="10" [selected] ="true">10</option>

you have to use select as a property binding.

let me know if it helps

Upvotes: 3

Andrei

Reputation: 12206

just assign value to a select

 <select [value]="10" ngModel>
 ...

Upvotes: 3

Angular 8 drop down selected option not showing, how come?

Answers (9)

Related Questions