How to set default selected object for select option in angular 6

Question

I am trying set default selected object for select option in angular 6.But it's not working

<select name="editUserType" class="form-select" id="editUserType" [(ngModel)]="updateModel.userType">
    <option value="" selected disabled>Select User Type</option>
    <option *ngFor="let userType of userTypeList"  [selected ]="userType.code == updateModel.userType.code"  [ngValue]="userType">{{userType.description}}</option>
</select>

userType is a object I want to, when I load web page set default object for select option.

[(ngModel)]="updateModel.userType",since usertype is object no value will be set.I would suggest you to hardcode some value here and check like [(ngModel)]="Shalika" and for your information you cannot bind object only primitive types are possible. — Hameed Syed, Jan 24 '19 at 06:05
Click on the link below this might help you. https://stackoverflow.com/a/56346652/9292877 — , May 28 '19 at 16:40

score 1 · Answer 1 · answered Jan 24 '19 at 06:13

1

set the default value from the component

constructor(){
  this.updateModel.userType = ""
}

answered Jan 24 '19 at 06:13

Sachila Ranawaka

39,756
7
56
80

Thank for the reply @sachila.But my concern is updateModel.userType has a default value get by backend.It should be auto selected in the drop down. – Shalika Jan 24 '19 at 06:21
set the ngvalue to value that u get from backend. like `[ngValue]="userType.code"` – Sachila Ranawaka Jan 24 '19 at 06:23
is it possible to set [ngValue]="userType" like this ? I want to pass whole object to the backend. – Shalika Jan 24 '19 at 06:25
then u need get the whole object from backend and assign. – Sachila Ranawaka Jan 24 '19 at 06:26
yes I can assign whole object in backend.But default selected value not set using below code.[selected ]="userType.code == updateModel.userType.code" .Is there any way to set selected value ? – Shalika Jan 24 '19 at 07:03
did u sort the issue ? – Sachila Ranawaka Jan 24 '19 at 11:34
still no !! I set the value other than try to set the object. – Shalika Jan 24 '19 at 11:35
can you create a stackBlitz – Sachila Ranawaka Jan 24 '19 at 11:36

How to set default selected object for select option in angular 6

1 Answers1