Remove/Disable selected options from a dropdown(Which is dynamically created) in angular 8

user_5629502 0
Viewed 1957

I have a dynamic dropdown with some fields. enter image description here

  • press + button will generate a new row.We can have any number of rows here.
  • I need to Remove/Disable the previously selected dropdown values from here

I have stored selected items and my entire list like this.

SelectedFieldList =["ProductCode","Name"];
FieldList=["ProductCode","Name","Code","Image","Category", etc..]

I have tried to disable the selected Options using this code

 <select formControlName="FieldName">
                        <ng-container *ngFor="let FieldItem of FieldList">
                          <option *ngIf="!SelectedFieldList.includes(FieldItem)"  [value]="FieldItem">{{FieldItem}}</option>
                          <option [disabled]="true" *ngIf="SelectedFieldList.includes(FieldItem)"  [value]="FieldItem">{{FieldItem}}</option>
                        </ng-container>
                      </select>

This is working fine inside the dropdown. But the issue is after disabling the previously selected item in the next button click. This is changing the already selected dropdown values. Means it's also disabling from the already selected dropdowns and showing the next related value.

In the above screenshot, I have selected the "Product number" .But after clicking + button it's disabled from the next dropdown successfully. but it's changed the value to "Product code" in the first dropdown(Product number is also there but it's a disabled format). enter image description here

any solution will be appreciated. Thanks in advance

angular7 angular9 angular8 angular typescript
1 Answers

Why dont you bind the condition to disabled input?

 <ng-container *ngFor="let FieldItem of FieldList">
    <option [disabled]="SelectedFieldList.includes(FieldItem)"  [value]="FieldItem">{{FieldItem}}</option>
 </ng-container>
user_93123270
Related