select list set selected item angular 2 ngModel

Question

This is my current code:

<select name="role" [(ngModel)]="user.role">
    <option *ngFor="let role of roles" [ngValue]="role" [attr.selected]="role == user.role ? 'true' : 'false'">{{role.name}}</option>
</select>

I'm loading all the roles in an array, and the user class has a Role attribute (which is not loaded like user.role = roles[0] but just through the backend data).

The problem is that the selected attribute is not working, and my select is not going to the correct role. What am I doing wrong?

Günter Zöchbauer · Accepted Answer · 2017-02-14 14:51:39Z

6

Just remove

[attr.selected]="role == user.role ? 'true' : 'false'"

and assign the selected role to user.role and ngModel will make the matching item the selected one.

If the role is an object, the assigned instance needs to be identical.

See also the recently added custom comparison https://github.com/angular/angular/issues/13268 available since 4.0.0-beta.7

<select [compareWith]="compareFn" ...

compareFn(val1, val2): boolean {
  return val1 && val2 ? val1.id === val2.id : val1 === val2;
}

edited Feb 14, 2017 at 14:51

answered Feb 14, 2017 at 11:35

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

4 Comments

JDOE Over a year ago

Thank you, makes sense that it doesn't work since the objects are not the same reference. Can I use a ngComparator for this? Or what would be the syntax?

Günter Zöchbauer Over a year ago

I updated my answer. It should be included in 4.0.0-beta.7

JDOE Over a year ago

Just one question, did you test this out? I tried it but couldn't get it to work with the [compareWith] function. Apparently my val2 is always null =/

Günter Zöchbauer Over a year ago

Are you using Angular 4.0.0-beta.7? I haven't tested it, but the code is from an example in the linked PR, from the guy who implemented this feature.

Suren Srapyan · Accepted Answer · 2017-02-14 11:35:15Z

3

You don't need to use [attr.selected]. [(ngModel)]="user.role" is two-way data-binding, it will select the matched option from your list if value is equal to user.role. And you can also use basic [value]

<select name="role" [(ngModel)]="user.role">
    <option *ngFor="let role of roles" [value]="role">{{role.name}}</option>
</select>

answered Feb 14, 2017 at 11:35

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

1 Comment

Royi Namir Over a year ago

Where is the documentation for [ngValue]? I didn't find it. When should I use it ?

Yoav Schniederman · Accepted Answer · 2017-02-14 11:40:44Z

0

<select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)" name="sel2">
    <option [value]="i" *ngFor="let i of devices">{{i}}</option>
</select>

onChange(newValue) {
    console.log(newValue);
    this.selectedDevice = newValue;\
}

answered Feb 14, 2017 at 11:40

Yoav Schniederman

5,4033 gold badges30 silver badges32 bronze badges

Collectives™ on Stack Overflow

select list set selected item angular 2 ngModel

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related