CODEWITHSUNDEEP
angulartypescript
dextercom
dextercom

Reputation: 162

An issue with angular 4 select element behavior on selecting an option

I am building an angular 4 (v4.2.5 cli) app and I have encountered the following issue:

I am using a select element in the following manner:

<div class="col-xs-8">
    <select class="col-xs-12" [(ngModel)]="roleId" (ngModelChange)="changeSelected($event)">
        <option *ngFor="let type of userTypes" [ngValue]="type" [selected]="type.Name === role">{{ type.Name }}</option>
    </select>
</div>

Essentialy I wanted to bind the selection event to a specific action in my component class:

changeSelected(event) {
    this.roleId = event.ID;
}

And it works, when I select one of the options the event is fired and the field "roleId" gets set. However, the selected item just disappears from view (I remain with an empty option). I am testing my solution in chrome. Is [ngValue] attribute binding interferes in some way with the [selected] attribute binding? Am I missing something? Thanks in advance for any help.

Upvotes: 0

Views: 274

Answers (2)

dextercom
dextercom

Reputation: 162

You either use [(ngModel)]="..." or [ngModel]="..." (ngModelChange)="...", don't mix the two. Thanks jonrsharpe, once again.

Upvotes: 0

user4676340
user4676340

Reputation:

When you want to change the value of a select, you don't need to trigger an event for that. Just delete your ngModelChange attribute, your roleId property will have the value you selected in any way.

Upvotes: 1

Related Questions