Angular PreventDefault on change event is not working

Question

For a select element I'm trying to prevent the value from changing based on some conditions:

<select [ngModel]="selectedPriority" (change)="onPriorityChanged($event)">
  <option *ngFor="let priority of priorities" [ngValue]="priority">{{priority.label}}</option>
</select> 

onPriorityChanged(event) {
  event.preventDefault();
  return false;
}

This is not working. The model is not updated because I use 1-way binding but the selected item in the select changes, even though I use preventDefault.

What is the correct way to achieve this ?

try this : ` <select [ngModel]="selectedPriority" (change)="onPriorityChanged($event)"> <option *ngFor="let priority of priorities" [value]="priority">{{priority.label}}</option> </select>` — CruelEngine
– CruelEngine, Commented Feb 16, 2018 at 10:09
It is not cancelable at all. You want to do some hack like setting previous value on change event in your ngModel. — Gourav Pokharkar
– Gourav Pokharkar, Commented Feb 17, 2018 at 5:19

Gourav Pokharkar · Accepted Answer · 2021-02-07 12:16:27Z

5

'change' event is not cancellable: Refer(https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event and https://stackoverflow.com/a/24252333/6848923)

You can reset value in ngModel on change event if you want to prevent the selection for a particular condition.

edited Feb 7, 2021 at 12:16

answered Feb 16, 2018 at 10:23

Gourav Pokharkar

1,6481 gold badge16 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Angular PreventDefault on change event is not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related