在一个下拉列表中选择的值不应出现在 Angular 材质的其他两个下拉列表中

Question

Selected value in one dropdown should not appear in other two dropdowns in Angular material. How to remove the selected value in one dropdown from all other dropdowns? (I have dynamic dropdown which gets added each time a button in clicked)

I tried using this https://stackblitz.com/edit/angular-dqvvf5?file=src%2Fapp%2Fapp.component.html but the logic is not working for angular material.

Answer 1

I've taken your Stackblitz and managed to get it working using mat-select instead of the standard HTML select . Please see this Stackblitz for a working demo.

The main changes were in the HTML...

HTML

<div *ngFor="let field of fieldArray; index as idx" style="margin-bottom: 8px">
  <mat-form-field appearance="fill">
    <mat-label>Select Language</mat-label>
      <mat-select #selectLang (selectionChange)="selected(selectLang.value,i)">
      <ng-container *ngFor="let lang of languageList" >
        <mat-option *ngIf="selectLang.value === lang.name || !isSelected(lang.name)" [value]="lang.name">
          {{lang.name}}
        </mat-option>
      </ng-container>
    </mat-select>
  </mat-form-field>
  <button (click)="deleteFieldValue(idx, selectLang.value)" style="margin-left: 8px">X</button>
</div>

<button (click)="addFieldValue()">Add Select</button>

The Typescript is pretty much the same as in your example, except I've modified the signature of the selected() function to read selected(value: string, idx: number) as you're passing 2 parameters into that from your HTML.