remove selected option from drop down list in angular

Question

I have a page where dropdown list of items is coming. The list is array of object. I want to remove that object from list which have been selected before. component.html

    <select (change)="onChange($event.target.value)" type="number"                      
    class="form-control" formControlName="Id" >
       <option hidden value="" >Please Select Item</option>
       <option *ngFor="let name of getItems"  type="number" [ngValue]="name.Id">
          { name.ItemName }}
       </option>
    </select>

my component.ts file

   ngOnInit(){
       this.service
      .getItemListByRule(this.Id)
      .subscribe((res: any) => {
      this.getItems = res.payload;
    });
  } 
  onChange(value) {    
     this.getItems.splice(this.getItems.findIndex(item => item.Id === value), 1);
     console.log(this.getItem)
  }

I am using splice method to remove selected item from list of array. But it is not working as expected.

Answer 1

If you want to not show but can be selected you need attrib as hidden, some like

    <form [formGroup]="form">
        <select type="number"
        class="form-control" formControlName="Id" >
           <option hidden value="null" >Please Select Item</option>
           <option *ngFor="let name of items" 
               <!--just simple hidden if is the value select
                   be carefull!, is not equal use "null" to not add the attrib hidden-->
               [hidden]="form.get('Id').value==name.Id?true:null" 
               type="number" [ngValue]="name.Id">
              {{ name.ItemName }}
             </option>
          </select>
    </form>

See the stackblitz

Update if we has a FormArray

The formArray can be a FormArray of FormControls

  form = new FormGroup({
    array: new FormArray([new FormControl(null), new FormControl(null)])
  });

Or a FormArray of FormGroups

  form = new FormGroup({
    array: new FormArray([
      new FormGroup({
          id:new FormControl()
         }), 
      new FormGroup({
          id:new FormControl()
         }), 
    ])
  });

In any case you need, as usuall when mannage a formArray a getter

  get array() {
    return this.form.get("array") as FormArray;
  }

If is a FormArray of FormControls, you use [hidden]="array.at(i).value==name.Id?true:null"

<form [formGroup]="form">
    <div formArrayName="array">
        <div *ngFor="let control of array.controls;let i=index">
            <select type="number"
    class="form-control" [formControlName]="i" >
       <option hidden value="null" >Please Select Item</option>
       <option *ngFor="let name of items" 
            [hidden]="array.at(i).value==name.Id?true:null"
            type="number" [ngValue]="name.Id">
          {{ name.ItemName }}
         </option>
      </select>
        </div>
    </div>
</form>

If you use a FormArray of FormGroups use [hidden]="array.at(i).value.Id==name.Id?true:null"

<form [formGroup]="form">
    <div formArrayName="array">
        <div *ngFor="let control of array.controls;let i=index" [formGroupName]="i">
            <select type="number"
    class="form-control" formControlName="Id" >
       <option hidden value="null" >Please Select Item</option>
       <option *ngFor="let name of items" 
             [hidden]="array.at(i).value.Id==name.Id?true:null" 
             type="number" [ngValue]="name.Id">
          {{ name.ItemName }}
         </option>
      </select>
        </div>
    </div>
</form>

NOTE: The stackblitz is updated with the three cases

Answer 2

Demo First of all you forgot to assing your result to your array again

change options to

 <option *ngFor="let name of getItems"  type="number" value="{{name.Id}}">
    {{ name.ItemName }}
 </option>

and in change method assing to your array

onChange(value) {   
   this.getItems=this.getItems.filter(x=>x.Id!=value)
}