Angular - Clear the selection of <select><option> if I opt out of accepting the change

Question

Angular - Clear the selection of <select><option> if I opt out of accepting the change

I have created a dropdown menu using HTML <select> and <option> tags, along with a JavaScript function that triggers a confirmation dialogue when an option is selected. The confirmation offers a simple choice between "yes" or "no."

If the user selects "yes," the current state will be updated to the chosen option from the dropdown. Choosing "no" will keep the state unchanged.

The issue I am facing is that after selecting "no," the dropdown menu remains highlighting the option that was rejected. Is there a way for the dropdown menu to revert back to showing the current state instead?

Here is a link to my StackBlitz project demonstrating the problem

UPDATE

While some of the responses provided useful insights, one aspect that was not addressed is that the state does not display the disabled option if it does not have an assigned value.

javascript angular typescript

Answer 1

Answer №1

Save the previously selected option in a variable called preState and revert to this value when the user clicks "no".

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 display the disabled option mentioned in your update, add [selected]='!newState' on the disabled option:

<select (change)="setState($event.target.value)">
  <option disabled [selected]='!newState'>--Select 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>

Answer 2

Save the previously selected option in a variable called preState and revert to this value when the user clicks "no".

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 display the disabled option mentioned in your update, add [selected]='!newState' on the disabled option:

<select (change)="setState($event.target.value)">
  <option disabled [selected]='!newState'>--Select 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>

Answer 3

Answer №2

Upgrade to reactive forms and initialize the default state.

You can then utilize the reset method on your form control using the default state.

Explore Stackblitz Example

<select [formControl]="selection">
  <option disabled>--Choose an option--</option>
  <option *ngFor="let choice of choices" [value]="choice.name" [selected]="chosenOption(choice.name)">{{choice.name}}</option>
</select>

selection: FormControl = new FormControl(this.choices[0].name);
defaultState = this.selection.value;

constructor() {
  this.selection.valueChanges.subscribe(value => this.updateState(value));
}

...

resetForm() {
  this.selection.reset(this.defaultState);
  this.reviewState = false;
}

Important Note: I demonstrated using a form control, but the same concept applies to form groups as well

Answer 4

Upgrade to reactive forms and initialize the default state.

You can then utilize the reset method on your form control using the default state.

Explore Stackblitz Example

<select [formControl]="selection">
  <option disabled>--Choose an option--</option>
  <option *ngFor="let choice of choices" [value]="choice.name" [selected]="chosenOption(choice.name)">{{choice.name}}</option>
</select>

selection: FormControl = new FormControl(this.choices[0].name);
defaultState = this.selection.value;

constructor() {
  this.selection.valueChanges.subscribe(value => this.updateState(value));
}

...

resetForm() {
  this.selection.reset(this.defaultState);
  this.reviewState = false;
}

Important Note: I demonstrated using a form control, but the same concept applies to form groups as well

Answer 5

Answer №3

If you're not using two-way binding, any changes to your variable won't impact the template. Here's a suggested approach:

HTML file

<select [(ngModel)]="state" (change)="setState()">
  <option disabled [value]="null">--Choose 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 make this change?</p>
    <p><span class="bold">{{lastState}}</span> will be changed 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;
}

Answer 6

If you're not using two-way binding, any changes to your variable won't impact the template. Here's a suggested approach:

HTML file

<select [(ngModel)]="state" (change)="setState()">
  <option disabled [value]="null">--Choose 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 make this change?</p>
    <p><span class="bold">{{lastState}}</span> will be changed 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;
}

Angular - Clear the selection of <select><option> if I opt out of accepting the change

UPDATE

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for sending Raw Commands to a Receipt Printer using Node.JS?

What is the process for making changes to a document in Mongoose?

How to efficiently store and manage a many-to-many relationship in PostgreSQL with TypeORM

How can I populate a form in Meteor with data from a MongoDB collection that was previously inserted?

Converting data received from the server into a typescript type within an Angular Service

I am encountering an issue where I am using Getserversideprops within a page to retrieve data from Strapi, but I am consistently

Set a dynamic Active Class on various divisions by utilizing their respective indexes

Passport JS receiving negative request

Is it possible for the outcome of a component to be passed to render and actually show up as undefined

Issue with loading Three.js asynchronously

Using NavParams within a service component,

A child component in Vue.js unexpectedly starts updating when the parent component renders and uses object literals as props

Using Angular's ng-switch directive within a select dropdown option

Switching the website address after picking an option from the drop-down menu

Tips for simulating the getCustomRepository function in typeORM

Is it possible to rearrange the slide order in Swiper Grid View?

Does performing regForm.reset() not only clear the form but also deactivate it?

Create text that alternates between blinking and changing content simultaneously

How to troubleshoot Javascript code that fails to identify if a color is white

The program is unable to locate the script files I have saved