Set selected item in select list - Angular2

Question

I have the following data structure in my firebase table:

Inside my Angular2 application I retrieve the entries and and display them in a select list as shown here:

<select class="form-control" id="lookingFor" formControlName="gender" >
   <option value="" selected>Please Select</option>
   <option *ngFor="let status of genderValue" [value]="status.id">{{ status.description}}</option>
</select>

As you can see my first item in the list is a please select, this is selected by default before they have saved their profile. The issue I have is when they have saved their profile and reloaded the edit profile page the selected value is of course 'please select' when it should be either male or female.

After some searching I added the following attribute [selected] my code now looks like this:

<select class="form-control" id="lookingFor" formControlName="gender" >
       <option value="" selected>Please Select</option>
       <option *ngFor="let status of genderValue" [value]="status.id" [selected]="editProfileForm.controls.gender">{{ status.description}}</option>
    </select>

However when running the project, it selects male as default even if I delete the value from Firebase it'll always remain as male selected.

Regarding what I'm doing inside my ts file, I simply call Firebase build the select list, then call get User Profile, I then pass the profile values into my form setup (reactive).

So my question is, how can I have Please Select as selected if the user has not specified their gender, or if they have specified their gender then set the relevant item to selected.

NOTE: I use the uniqueId generated by firebase as the value that is saved when the user saves their profile.

This is the part where I configure my form:

// userProfile is returned from Firebase
// gender will either have a value or it'll be null.
this.editProfileForm = new FormGroup({
    seeking: new FormControl('', Validators.required),
    gender: new FormControl(this.userProfile.gender, Validators.required)
 });

After the editProfileForm has been configured, it clear shows the value of gender:

When you delete the value from firebase make sure you updated the model with the new value. — Roman C, Mar 05 '17 at 21:27
@RomanC I've done that, I also closed the application all together and re-started it yet the issue outlined above in the question still persists — Code Ratchet, Mar 05 '17 at 21:27
I do bind the property, its bound to the user profile that comes back from firebase. — Code Ratchet, Mar 05 '17 at 21:44

cyr_x · Accepted Answer · 2017-03-06T01:57:42.523

2

It's because editProfileForm.controls.gender is always true (it is the form control instance itself), you have to check if the value of editProfileForm.controls.gender.value is the same as status.id

edited Mar 06 '17 at 01:57

answered Mar 05 '17 at 22:07

cyr_x

13,987
2
32
46

Can I do that on the `html` ? – Code Ratchet Mar 05 '17 at 22:08
I done the following in the `html` `editProfileForm.controls.gender == status.id` however when saving the profile after selecting `male` reloaded the page and selected item is `Please Select` – Code Ratchet Mar 05 '17 at 22:10
Are you sure that `this.userProfile.gender` and `editProfileFOrm.controls.gender` contain the right values, at the time the form is created? – cyr_x Mar 05 '17 at 22:14
I've logged `this.userProfile.gender` to the console and saw the Key for female. I then inspected the select list an saw the same value for female as an option to select. – Code Ratchet Mar 05 '17 at 22:28
So at the time this line `gender: new FormControl(this.userProfile.gender, Validators.required)` get processed your value of `this.userProfile.gender` is "female" – cyr_x Mar 05 '17 at 22:35
That's correct yes, It did just set the value to female, however when deleting the gender from Firebase and reloading the application nothing appears to be selected within the page, not even Please Select. Inside my `gender: new FormControl(this.userProfile.gender, Validators.required)` if I remove userProfile.gender and set the value to `' '` then Please Select is selected. – Code Ratchet Mar 05 '17 at 23:18
I just added another photo showing the value of gender after the `editProfileForm` has been configured, this example I have selected male. Yet when page loads It select `Please Select` you know I have a feeling it has something to do with `selected` on `Please Select` but I would of thought providing a gender value would've overrode that. – Code Ratchet Mar 05 '17 at 23:28
so it seems, if I use `editProfile.controls.gender.value == status.id` instead of `editProfile.controls.gender == status.id` within the `HTML` it sets the selected value. Not 100% sure if that's the correct way to do because examples I have see they don't have the .value at the end... – Code Ratchet Mar 06 '17 at 01:50
Makes perfectly sense because `editProfile.controls.gender` is the formcontrol itself so you have to use `value` :P i updated my answer for future readers. – cyr_x Mar 06 '17 at 01:57
I have noticed something though, when I'v built my select lists and then set the initial selected value their seems to be a delay of 1.5 seconds before showing the selected value... if this normal? I thought `Angular2` was built for performance along with other things, – Code Ratchet Mar 06 '17 at 02:19

score 0 · Answer 2 · answered Mar 05 '17 at 22:15

0

The value in the userProfile.gender should be related to the option value, so it became selected.

<select class="form-control" id="lookingFor" formControlName="gender" [(ngModel)]="userProfile.gender">
       <option value="" selected>Please Select</option>
       <option *ngFor="let status of genderValue" [ngValue]="status.id">{{ status.description}}</option>
    </select>

answered Mar 05 '17 at 22:15

Roman C

49,761
33
66
176

You souldn't use `ngModel` with model driven forms. – cyr_x Mar 05 '17 at 22:18

Set selected item in select list - Angular2

2 Answers2

Linked