Angular / Select / formControl / default value

Question

I am trying to find a way to mark the option as selected in my select but I am not successful.

I tried several solutions found over internet but couldn't find the right implementation.

Does any one have a working example, thanks.

Below (part of) my code

.html

<form [formGroup]="fgForm">
...
<select class="form-control" formControlName="country">
    <option value="" [ngValue]="null">Choose your country</option>
    <option 
        *ngFor="let oneCountry of selOptCountries;" 
        [ngValue]="oneCountry"
    >{{oneCountry.name}}</option>
</select>
</form>

.ts (formControl)

// The data comes from an API
this.selOptCountries = [
{"id": 2516, "name": "Austria", "iso2": "AT"},
{"id": 2519, "name": "Belgium", "iso2": "BE"},
{"id": 2523, "name": "Bulgaria", "iso2": "BG"},
{"id": 2601, "name": "Croatia", "iso2": "HR"},
...
{"id": 2636, "name": "Luxembourg", "iso2": "LU"}
...
];

this.fgForm = this.formBuilder.group({
'country': [
        {value: datas.country,disabled: false},
        [Validators.required]
    ],
});

datas.country

{id: 2636, name: "Luxembourg", iso2: "LU"}

check this:netbasal.com/…

Chellappan வ
– Chellappan வ

2020-09-29 14:20:27 +00:00
Commented Sep 29, 2020 at 14:20 — Chellappan வ
– Chellappan வ, Commented Sep 29, 2020 at 14:20

andsilver · Accepted Answer · 2020-09-29 14:39:48Z

2

Instead of setting the value with datas.country directly, write it as like this:

value: this.selOptCountries.find(c => c.id === datas.country.id)

Demo

https://stackblitz.com/edit/object-option-item?file=src/app/app.component.ts

The datas.country object and the country object(Luxembourg) in the countries are not recognized as same though they have exactly same properties since every object in JavaScript is unique.

From MDN

In JavaScript, objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.

edited Sep 29, 2020 at 14:39

answered Sep 29, 2020 at 14:26

andsilver

6,0323 gold badges22 silver badges50 bronze badges

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

Comments

Kamran Khatti · Accepted Answer · 2020-09-29 14:43:06Z

1

If you are setting your select option value as object instead of id etc then you need to use compareWith directive to compare the value.

<form [formGroup]="fgForm">
 <select class="form-control" formControlName="country" [compareWith]="selectedVal">
<option [ngValue]="">Choose your country</option>
<option 
    *ngFor="let oneCountry of selOptCountries;" 
    [ngValue]="oneCountry"
>{{oneCountry.name}}</option>
</select>

in .ts

selectedVal(valOne, valTwo ) : boolean {
  return valOne.id === valTwo.id;
}

Working DEMO

edited Sep 29, 2020 at 14:43

answered Sep 29, 2020 at 14:35

Kamran Khatti

4,2071 gold badge23 silver badges33 bronze badges

Comments

Adamski · Accepted Answer · 2020-09-29 16:19:19Z

0

The clean and correct way to do this is to use the ngModel binding on the select tag.

Here is an answer I submitted on another post, with reference and working Stackblitz example:

https://stackoverflow.com/a/64082745/450388

answered Sep 29, 2020 at 16:19

Adamski

9092 gold badges10 silver badges28 bronze badges

Collectives™ on Stack Overflow

Angular / Select / formControl / default value

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related