How to Disable Mat-Select Option once it has been selected

Question

I have a mat-select and I want to disable the options once I have selected them. For eg: If I select Time then Time should be disabled in the Next mat-select. I have created a stackblitz https://stackblitz.com/edit/angular-anus7w?file=app%2Fselect-overview-example.ts of my requirement.Currently only the Key gets disabled. However in my case now the Drop down data will be dynamically generated and I cannot hard code the Values which need to be disabled.

So what I want is that if I select a purticular value in mat-select 1 then that value should be disabled in mat-select 2. Similarly the value that I select

Answer 1

You have first bind [(ngModel)]="firstOption" in the form and later do the validation. No change event is required here

In component file:

firstOption = '';
secondOption = '';
thirdOption = '';
fourthOption = '';

In template html file

<h4>Basic mat-select</h4>
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="firstOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === secondOption.type ||
        type.text === thirdOption.type ||
        type.text === fourthOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="secondOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === firstOption.type ||
        type.text === thirdOption.type ||
        type.text === fourthOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="thirdOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === secondOption.type ||
        type.text === firstOption.type ||
        type.text === fourthOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="fourthOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === secondOption.type ||
        type.text === thirdOption.type ||
        type.text === firstOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />

Answer 2

Please check my solution https://stackblitz.com/edit/angular-anus7w-9ovxqd?file=app%2Fselect-overview-example.ts

I used Observable and an array property for store all chosen values

Main ideas:

• Type.ts model file with constructor for better interacting.
• For ease in template i put selector in loop with index 'optI'. If you need to make selections with different data or logic you can write them as you did in your example. Please note, that mat-option get an Observable with Async pipe types$ | async
• All logic of component I described in comments

Answer 3

    <mat-form-field>

      <mat-select [(value)]="selected" [placeholder]="!selected  ? 'Your custom placeholder' : ''">
        <mat-option value="1">Option 1</mat-option>
        <mat-option value="2">Option 2</mat-option>
        <mat-option value="3">Option 3</mat-option>
        <mat-option value="4">Option 4</mat-option>
        <mat-option value="5">Option 5</mat-option>
      </mat-select>

    </mat-form-field>