CODEWITHSUNDEEP
htmlangulartypescript
Cpt Kitkat
Cpt Kitkat

Reputation: 1402

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

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

Upvotes: 1

Views: 37375

Answers (3)

Alexis Rouan
Alexis Rouan

Reputation: 1

    <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>

Upvotes: 0

Roman Lytvynov
Roman Lytvynov

Reputation: 503

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:

Upvotes: 4

Chenna
Chenna

Reputation: 2623

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 />

Upvotes: 2

Related Questions