CODEWITHSUNDEEP
javascriptangulartypescriptangular7
kianoush
kianoush

Reputation: 85

preselect dropdown in angular7

i have this form for edit user info :

<form [formGroup]="editUSer">
  <input formControlName="name">
<select formControlName="roleName">
  <option *ngFor="let item of listRole">{{item.name}}</option>
</select>
</form>

use this code for setvalue in form :

this.editUSer.setValue({
  name:this.usermodel.name,
  roleName:this.usermodel.roleName
})

but i need to set dropdown user value .

for exmaple user have manager role but it not set the manager in drodown .

Sample Code

how can i set value of user in dropdown .

Upvotes: 0

Views: 48

Answers (2)

wentjun
wentjun

Reputation: 42526

After checking your usermodel property, I have realised that it is binded to the name of item in listRole. Therefore, You will need to bind the value attribute on your to the name property of item (item.name).

<form [formGroup]="editUSer">
  <input formControlName="name">
  <select formControlName="roleName">
    <option *ngFor="let item of listRole" [value]="item.name">{{item.name}}</option>
  </select>
</form>

As for your component.ts, I don't see any glaring issues. I have edited your demo over here.

Upvotes: 1

Lekens
Lekens

Reputation: 1969

Why not bind the selected attribute.

<form [formGroup]="editUSer">
  <input formControlName="name">
<select formControlName="roleName">
  <option *ngFor="let item of listRole" [selected]="item.name === roleName">{{item.name}}</option>
</select>
</form>

Upvotes: 1

Related Questions