CODEWITHSUNDEEP
typescriptangular
daddyschmack
daddyschmack

Reputation: 173

angular2 remove or disable select option from secondary select element

I'm working on an angular 2 prototype component. I have two select controls that have the same options. In the second select element (destination) I would like to disable or remove the option that was selected in the first select element (origin). (Incidentally, any idea why the first selected option is displaying?)

Here is the plunkr

 //our root app component
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';

 @Component({
   selector: 'my-app',
   providers: [],
   template: `
    <div>
     <h2>{{name}}</h2>
       <select id="trip_origin" [(ngModel)]="origin" 
       class="start" (change)="onChange($event)">
       <option disabled selected >Select a shipping origination</option>
       <option *ngFor="let item of items" [ngValue]="item"> {{item.name}} - {{item.loc}}</option>
      </select>
      <div>selected: {{origin | json}}</div>
      <hr>
      <select id="trip_destination" name="destination" [(ngModel)]="destination">
       <option *ngFor="let item of items" [ngValue]="item">{{item.name}} - {{item.loc}}</option>
      </select>
      <div>selected: {{destination | json}}</div>
   </div>

    <h2>Destination -- {{destination.loc}}</h2>
    <h2>Origin -- {{origin.loc}}</h2>

  `,
 directives: []
})

export class App {

 public items:object[] = [
  {"loc":"HOU","name":"Houston"},
  {"loc":"DAL","name":"Dallas"},
  {"loc":"SAT","name":"San Antonion"}
 ];

 constructor() {
  this.origin={};
  this.name = 'Test Select Control'
  this.destination = this.items[1] 
 }
 onChange($event){
     console.log($event)
 }
}

Upvotes: 2

Views: 20677

Answers (2)

burgula shyam
burgula shyam

Reputation: 31

template:
    <select class="form-control" (change)="change($event)">
     <option  selected disabled>Select</option>
    <option value="{{ele.name}}" *ngFor="let ele of selectList" [disabled]="ele.isdisabled">
       {{ele.name}}
     </option>
      </select>
 <button type="button" class="btn btn-primary btn-sm" (click)="resetOptions()">Reset</button>
ts file:
selectList: any = [
   { 
     "name":"Name",
    "isdisabled":false
  },
    { 
      "name":"DIN",
      "isdisabled":false
  },
    { 
      "name":"Mobile",
      "isdisabled":false
  }
  ]

change(event) {
    this.selectList.forEach(element => {
      if(event.target[event.target.options.selectedIndex].value===element.name){
        element.isdisabled=true;
      }
    });
  }

to reset:
 resetOptions(){
   $('select').prop('selectedIndex', 0);
   this.selectList.forEach(element => {
     element.isdisabled=false;
   });
  }

Upvotes: 0

Dethariel
Dethariel

Reputation: 3624

You can disable the option by simply binding to the [disabled] DOM attribute:

<select id="trip_destination" name="destination" [(ngModel)]="destination">
  <option [disabled]="item === origin" *ngFor="let item of items" [ngValue]="item">{{item.name}} - {{item.loc}}</option>
          ^^^^^^^^^^
</select>

This will make the currently selected "Origin" value disabled in the "Destination" selector (see plunker)

As to your other mini-question, which I read as "Why the first option is not displayed?". That's probably due to the fact that "trip_origin" is bound to [(ngModel)]="origin". You set this.origin = {} in the component's constructor. There's no corresponding object in this.items, so Angular does not know how to bind to this value. You can change this option to be

<option selected disabled [ngValue]="none">Select a shipping origination</option>

and change the ctor to have the line 

this.origin=this.none={};

Then it's displayed as expected (see here)

Upvotes: 4

Related Questions