Angular 4 setting selected option in Dropdown

Question

There are several questions about this and different answers but none of them really answers the question. So again:

Setting default of a Dropdown select by value isn't working in my case. Why? This is from the dynamic Form tutorial of Angular 4:

<select [id]="question.key" [formControlName]="question.key">
      <option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected">{{opt.selected+opt.value}}</option>
</select>

It doesn't select anything. Available options are:

trueaaa
falsebbb
falseccc

But static true:

<option ... [selected]="true">...</option>

selects the last value (all true). It also works with a private variable boolvar = true and using it in [selected]="boolvar"

I don't understand the difference between the "opt" object and the class variable.

hey Gregor Please try [selected]="opt.selected == true" its work for me. — Viijay ijardar
– Viijay ijardar, Commented Sep 1, 2017 at 13:19
! Holy **** ! It works! :D Thanks... a pity I still dont understand whats happening under the hood. — Gregor Sklorz
– Gregor Sklorz, Commented Sep 1, 2017 at 15:57

hestellezg · Accepted Answer · 2023-01-24 15:28:30Z

72

If you want to select a value based on true / false use

[selected]="opt.selected == true"

for example:

<option *ngFor="let opt of question.options" 
    [value]="opt.key" 
    [selected]="opt.selected == true">
        {{opt.selected+opt.value}} 
</option>

checkit out

Angular 2 - Setting selected value on dropdown list

edited Jan 24, 2023 at 15:28

hestellezg

3,7913 gold badges36 silver badges38 bronze badges

answered Sep 1, 2017 at 13:24

Viijay ijardar

1,1251 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gregor Sklorz Over a year ago

Well... that works for me. Even if its dirty. As long as I dont understand whats happening under the hood, its the best solution for me. Thy

Carnaru Valentin · Accepted Answer · 2018-04-11 13:25:04Z

Here is my example:

<div class="form-group">
    <label for="contactMethod">Contact method</label>
    <select 
        name="contactMethod" 
        id="contactMethod" 
        class="form-control"
        [(ngModel)]="contact.contactMethod">
        <option *ngFor="let method of contactMethods" [value]="method.id">{{ method.label }}</option>
    </select>
</div>

And in component you must get values from select:

contactMethods = [
    { id: 1, label: "Email" },
    { id: 2, label: "Phone" }
]

So, if you want select to have a default value selected (and proabbly you want that):

contact = {
    firstName: "CFR",
    comment: "No comment",
    subscribe: true,
    contactMethod: 2 // this id you'll send and get from backend
}

user4676340 · Accepted Answer · 2017-09-01 13:21:10Z

7

If you want to select a value as default, in your form builder give it a value :

this.myForm = this.FB.group({
    mySelect: [this.options[0].key, [/* Validators here */]]
});

Now in your HTML :

<form [formGroup]="myForm">
    <select [formControlName]="mySelect">
        <option *ngFor="let opt of options" [value]="opt.key">ANY TEXT YOU WANT HERE</option>
    </select>
</form>

What my code does is giving your select a value, that is equal to the first value of your options list. This is how you select an option as default in Angular, selected is useless.

answered Sep 1, 2017 at 13:21

user4676340

Comments

Ihor Dobrovolskyi · Accepted Answer · 2020-08-03 14:25:01Z

2

To preselect an option when the form is initialized, the value of the select element must be set to an element attribute of the array you are iterating over and setting the value of option to. Which is the key attribute in this case.

From your example.

<select [id]="question.key" [formControlName]="question.key">
  <option *ngFor="let opt of question.options" [value]="opt.key"</option>
</select>

You are iterating over 'options' to create the select options. So the value of select must be set to the key attribute of an item in options(the one you want to display on initialization). This will display the default of select as the option whose value matches the value you set for select.

You can achieve this by setting the value of the select element in the onInit method like so.

ngOnInit(): void{
    myForm : new FormGroup({
       ...
       question.key : new FormControl(null)
    })
    // Get desired initial value to display on <select>
    desiredValue = question.options.find(opt => opt === initialValue)
    this.myForm.get(question.key).setValue(desiredValue.key)
}

edited Aug 3, 2020 at 14:25

Ihor Dobrovolskyi

1,24110 silver badges19 bronze badges

answered May 16, 2020 at 15:35

Devesh Pradhan

2193 silver badges6 bronze badges

1 Comment

Kim Kakan Andersson Over a year ago

How would I do with preselected values when I have a <select multiple> element?

porgo · Accepted Answer · 2017-09-01 13:35:50Z

0

Remove [selected] from option tag:

<option *ngFor="let opt of question.options" [value]="opt.key">
  {{opt.selected+opt.value}}
</option>

And in your form builder add:

key: this.question.options.filter(val => val.selected === true).map(data => data.key)

answered Sep 1, 2017 at 13:35

porgo

1,7513 gold badges19 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular 4 setting selected option in Dropdown

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related