Angular - Reset <select><option> selection if I choose not to accept change [closed]

I have a dropdown list made of <select> and <option> tags, with a function to bring up a confirmation box when a selection is made. A simple yes/no.

<select>

<option>

yes

no

Clicking yes will set the current state to the state chosen from the dropdown, whereas no will of course not change the state.

yes

no

However, when clicking no, the dropdown list will remain highlighted on the state that we just declined changing to.

no

Is there a way in which I can get it to go back to the current state?

Here is my stackblitz to show what is going on

Some of the answers below have been good, but the one thing missing from them is that, if the state is not assigned to a value, I do not get the disabled option displayed.

state

disabled

This question appears to be off-topic. The users who voted to close gave this specific reason:

3 Answers
3

Hold prevois selected option in a variable preState and revert newState to preState when user clicks no.

preState

newState

preState

export class AppComponent
state;
newState;
preState;
checkState = false;

options = [
name:'dormant',
name:'active',
name:'finished'
];

setState(state)
this.preState = this.newState;
this.newState = state
this.checkState = true;


selectedOption(option)
return this.newState === option;


yes()
this.state = this.newState;
this.checkState = false;


no()
this.checkState = false;
this.newState = this.preState;




UPDATE:

To show the disabled option mentioned in your UPDATE, put [selected]='!newState' on the disabled option:

[selected]='!newState'

<select (change)="setState($event.target.value)">
<option disabled [selected]='!newState'>--Pick an option--</option>
<option *ngFor="let option of options" [value]="option.name" [selected]="selectedOption(option.name)">option.name</option>
</select>

<div *ngIf="checkState" class="check-state">
<p>Are you sure you want to change</p>
<p><span class="bold">state</span> to <span class="bold">newState</span></p>
<button (click)="yes()">yes</button><button (click)="no()">no</button>
</div>


Switch to reactive forms and register the default state.

You can then call reset on your form control with the default state.

reset

Stackblitz

<select [formControl]="select">
<option disabled>--Pick an option--</option>
<option *ngFor="let option of options" [value]="option.name" [selected]="selectedOption(option.name)">option.name</option>
</select>


select: FormControl = new FormControl(this.options[0].name);
defaultState = this.select.value;

constructor()
this.select.valueChanges.subscribe(value => this.setState(value));


...

no()
this.select.reset(this.defaultState);
this.checkState = false;



N.B. : I used a form control, but the same applies to form groups

disabled

disabled

select: FormControl = new FormControl(this.options[0].name);

disabled

<option>

Since you are not using two way binding the change you make to your variable doesn't affect the template. This is my approach:

HTML file

<select [(ngModel)]="state" (change)="setState()">
<option disabled [value]="null">--Pick an option--</option>
<option *ngFor="let option of options" [value]="option.name" >option.name</option>
</select>

<div *ngIf="checkState" class="check-state">
<p>Are you sure you want to change</p>
<p><span class="bold">lastState</span> to <span class="bold">state</span></p>
<button (click)="yes()">yes</button><button (click)="no()">no</button>
</div>


TS File

state;
lastState;
checkState = false;

options = [
name:'dormant',
name:'active',
name:'finished'
];

constructor()
this.lastState = this.state;


setState()
this.checkState = true;


yes()
this.checkState = false;
this.lastState = this.state;


no()
this.checkState = false;
this.state = this.lastState;