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

Executing a POST Request from AngularJS to a server-side script

Error in NextJS: The name 'NextApplicationPage' cannot be found

Color picker can be utilized as an HTML input element by following these steps

jQuery UI dynamically adjusting content layout based on browser size changes

Can you provide some guidance on utilizing a for loop within Angular?

What is the most efficient way to perform an array join in Node.js, akin to the speed of MongoDB's $

Save the entire compiler output as a text or CSV file by using the "strict":true compiler option in TypeScript

What could be causing the NoScript tag to malfunction across different web browsers?

The bond between TypeORM and express

Unable to pass parameters through the URL in Angular's POST request

Here is an example of how to use a script tag to check the value of a select tag in HTML:

Trouble with innerHTML in a for loop when using getJSON

"Have you ever wondered how the router object in express.js is seamlessly integrated with app.use(), considering that it only accepts

Unusual shadow cast by the box's silhouette

Methods for ensuring that fake browser tab focus remains on several tabs simultaneously

Tips for resolving the problem when encountering the "undefined data" issue in the success callback of an AJAX request

worldpay implements the useTemplateForm callback function

Display the checkbox as selected using AngularJS

The Conundrum of Angular 5 Circular Dependencies

Encountering error code 128 while attempting to download npm packages