Eliminate a specific choice from a drop-down menu in an Angular application

Question

Eliminate a specific choice from a drop-down menu in an Angular application

I am implementing a feature where clicking on a button adds more select drop downs. I want to ensure that the selected options in these new dropdowns do not duplicate any already chosen options.

Below is the code snippet used for the select drop down:

<select class="select form-control"
   formControlName="environment_id" (change)="onEnvChange($event.target.value)">
   <option selected="selected" disabled value="">Select Environment
   </option>
   <ng-container  *ngFor="let environment of environments">
      <option *ngIf="!selectedEnvironments.includes(environment.environment_id)"
      [value]="environment.environment_id">
      {{environment.environment_id}}</option>
   </ng-container>
</select>

In the component, I have the following function for change:

 public onEnvChange(selectedEnvironment)
 {
     this.selectedEnvironments.push(selectedEnvironment);
 }

The issue is that when an option is selected, it gets removed from the dropdown altogether. How can I modify the code so that the selected option is only removed from the next select dropdown?

javascript angular typescript

Answer 1

Answer №1

You may consider creating two instances of environments and monitoring selection changes using valueChanges from formControl. Once you have the selected environmentid, filter the other object to exclude this id.

For example:

  ngOnInit(){
    this.initializeForm();
    this.retrieveEnvironments();
    this.trackEnvironmentChanges()
  }

  initializeForm(){
      this.form = this.fb.group({
           'environment_id_1': [''],
           'environment_id_2' : ['']
})}

  retrieveEnvironments(){
      const environments = [
      {  'environment_id': 1, 'environment': 'A'  },
      {  'environment_id': 2, 'environment': 'B'  },
      {  'environment_id': 3, 'environment': 'C'  },
      {  'environment_id': 4, 'environment': 'D'  }];
      this.environments1 = environments;
      this.environments2 = environments;}

  trackEnvironmentChanges(){
     this.form.controls['environment_id_1'].valueChanges
             .subscribe((environment_id)=>{
             this.environments2 = this.environments1.filter((env)=> env.environment_id != environment_id)
})}

<form [formGroup]="form">
<div class="row">
    <select class="select form-control"   formControlName="environment_id_1">   
        <option value="">Select Environment 1 </option> 
        <option *ngFor="let environment of environments1"  [value]="environment.environment_id"> {{environment.environment}} </option> 
    </select>
</div>
<div class="row" style="padding-top: 10px;">
    <select class="select form-control"   formControlName="environment_id_2">   
        <option value="">Select Environment 2 </option> 
        <option *ngFor="let environment of environments2"  [value]="environment.environment_id"> {{environment.environment}} </option> 
    </select>
</div>

image description here

Answer 2

You may consider creating two instances of environments and monitoring selection changes using valueChanges from formControl. Once you have the selected environmentid, filter the other object to exclude this id.

For example:

  ngOnInit(){
    this.initializeForm();
    this.retrieveEnvironments();
    this.trackEnvironmentChanges()
  }

  initializeForm(){
      this.form = this.fb.group({
           'environment_id_1': [''],
           'environment_id_2' : ['']
})}

  retrieveEnvironments(){
      const environments = [
      {  'environment_id': 1, 'environment': 'A'  },
      {  'environment_id': 2, 'environment': 'B'  },
      {  'environment_id': 3, 'environment': 'C'  },
      {  'environment_id': 4, 'environment': 'D'  }];
      this.environments1 = environments;
      this.environments2 = environments;}

  trackEnvironmentChanges(){
     this.form.controls['environment_id_1'].valueChanges
             .subscribe((environment_id)=>{
             this.environments2 = this.environments1.filter((env)=> env.environment_id != environment_id)
})}

<form [formGroup]="form">
<div class="row">
    <select class="select form-control"   formControlName="environment_id_1">   
        <option value="">Select Environment 1 </option> 
        <option *ngFor="let environment of environments1"  [value]="environment.environment_id"> {{environment.environment}} </option> 
    </select>
</div>
<div class="row" style="padding-top: 10px;">
    <select class="select form-control"   formControlName="environment_id_2">   
        <option value="">Select Environment 2 </option> 
        <option *ngFor="let environment of environments2"  [value]="environment.environment_id"> {{environment.environment}} </option> 
    </select>
</div>

image description here

Eliminate a specific choice from a drop-down menu in an Angular application

Answer №1

Similar questions

Despite being installed, the message 'concurrently: command not found' pops up

Arrange, Explore (Refine), Segment HTML Chart

Aggregate values through an onclick event using a get request and iterate through each using

Tips for Retrieving a JavaScript Variable's Value in JSP

Utilize Javascript and JQuery to implement sending a custom header in an OPTIONS preflight API request

Zero Clipboard may experience functionality issues if it is invoked dynamically

Making a Cross-Origin Resource Sharing (CORS) request with jQuery utilizing the $

Accessing the form element in the HTML outside of the form tag in Angular 2

Backdrop dimming the Material UI Modal

Tips for getting a plugin to function properly when the page is refreshed in Nuxt app

The loading time for the Docker index HTML file page is unacceptably slow

Creating redux reducers that rely on the state of other reducers

Ensure that the default value in the text box remains unchanged until new text is input by utilizing jQuery

Retrieving components of an array

What seems to be the issue with loading this particular file into my JavaScript code?

Tips for loading images dynamically (or lazily) as they come into the user's view with scrolling

Switching up the default font style within TinyMCE

.submit fails to function when the bound object has been updated via an ajax call

Receiving Server Emissions in Vue/Vuex with Websockets

Automatically updating quantity with the power of jQuery