default value for Select dropdown with Angular 6

Question

I have a select input:

<select id="duration" name="duration" class="form-control select-lg"
          [(ngModel)]="championship.settings.fightDuration">
    <option *ngFor="let duration of durations"
          [selected]="championship.settings.fightDuration==duration"> 
          {{ duration }} {{ championship.settings.fightDuration==duration }}
    </option>
</select>

I have his value within championship.settings.fightDuration

I try to preselect it with:

[selected]="championship.settings.fightDuration==duration"

I in select text, I print the result of this condition, and it prints true on the element that matches the values, so it should work, but select has no selected value...

What am I missing ?

Anjana Silva · Accepted Answer · 2018-09-23 10:25:25Z

If someone is still having the problem selecting the default value try this.

Let's say you want the option to select has the value duration. I am assuming this option is already in the items array.

HTML

<select name="someName" [(ngModel)]="someModel">
   <option *ngFor="let key of items" [value]="key.value">{{ key.label }}</option>
</select>

TS

    class someComponent Implements OnInit {

      someModel;

      ngOnInit() { 
          this.someModel = 'duration';
          this.items = [
                            {value: 'duration', label : 'Duration'}, 
                            {value: 'other', label : 'Other'},
                            {value: 'someOther', label : 'Some Other'}
                          ];
      }

On Submit

Inside your submit function just call like this to get the selected value.

this.someModel

Hope this helps someone.

This video helped me though - https://www.youtube.com/watch?v=8ZlrORYOl_0

Reza · Accepted Answer · 2019-10-01 20:05:39Z

-1

You can use [ngValue] as below

<option *ngFor="let duration of durations" [ngValue]="duration"> 
      {{ duration }} {{ championship.settings.fightDuration==duration }}
</option>

Working example on stackblitz

edited Oct 1, 2019 at 20:05

answered Jun 15, 2018 at 13:51

Reza

20.1k18 gold badges102 silver badges177 bronze badges

2 Comments

Martin Parenteau Over a year ago

It should be [ngValue]="duration".

Reza Over a year ago

@JuliatzindelToro I edited my answer, as ConnorsFan mentioned it should have been [ngValue]="duration"

Collectives™ on Stack Overflow

default value for Select dropdown with Angular 6

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related