I am working on a dynamic dropdown feature with multiple fields. https://i.sstatic.net/28iQJ.png
- By pressing the + button, a new row is generated. Users can add any number of rows.
- My challenge is to prevent users from selecting previously chosen values in the dropdown list.
I have maintained a list of selected items and my complete field list as shown below.
SelectedFieldList =["ProductCode","Name"];
FieldList=["ProductCode","Name","Code","Image","Category", etc..]
To disable the selected options, I attempted using the following code snippet:
<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>
While this solution works within the dropdown, it encounters an issue upon clicking the next button. The disabled item gets rearranged in the dropdowns, impacting the selection order.
In the screenshot above, "Product number" was initially selected. After clicking the + button, it correctly disables in the next dropdown but alters the value to "Product code" in the first dropdown (although "Product number" remains disabled).
https://i.sstatic.net/Qp6B2.pngIf you have any suggestions or solutions, please share them. Thank you in advance!