How to disable particular option dynamically in Angular Mat-Select

Question

I have a list with an object has name and id properties:

[
  {
    "name": "open",
    "id": "1"
  },
  {
    "name": "inprogress",
    "id": "2"
  },
  {
    "name": "close",
    "id": "3"
  }
]

And using MatSelect with *ngFor to iterate over an array and bind the current status with select using [(ngModel)].

Expected output:

If the current status is inprogress then disable open option

StackBlitz Example

G. Tranter · Answer 1 · 2020-06-11T17:35:07.073

The example doesn't work properly because selected is bound with [value]="topping.id", but the logic uses selected.id which doesn't exist except on startup because you are initializing selected with a topping object.

Also, the logic [disabled]="topping.id < selected.id" is possibly flawed because it also disables inprogress when close is selected - you might want that - I'm not sure - but you only said you wanted to disable open when inprogress is selected.

Either use [value]="topping":

<mat-form-field>
    <mat-select placeholder="Toppings" [(ngModel)]="selected" [formControl]="toppings">
        <mat-option *ngFor="let topping of list" [value]="topping" [disabled]="selected.id === '2' && topping.id === '1'">{{topping.name}}</mat-option>
    </mat-select>
</mat-form-field>

Or change the logic and initialization of selected:

selected: any =  '2';

<mat-form-field>
    <mat-select placeholder="Toppings" [(ngModel)]="selected" [formControl]="toppings">
        <mat-option *ngFor="let topping of list" [value]="topping.id" [disabled]="selected === '2' && topping.id === '1'">{{topping.name}}</mat-option>
    </mat-select>
</mat-form-field>

Update for Angular v6/7 and later

Use [(value)] instead of [(ngModel)]. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and is removed in Angular v7.

I am using the `[(ngModel)]="obj.status"` which contains `name` and `code` in `status` object — Prashant Pimpale, Jul 31 '18 at 06:59
So the status which come in `obj.status` is inprogress then `open` option will be only disable that my requirement — Prashant Pimpale, Jul 31 '18 at 07:00
If your model uses the object `{name, code}` then follow the top example but replace `topping` with `status` (or `obj.status` I am not sure) and `id` with `code` I think. — G. Tranter, Jul 31 '18 at 22:19

score 2 · Answer 2 · edited Jun 18 '20 at 02:44

if user can select multiple options we dont really need ngModel as well, below is my solution to disable certain option on select of some different option in angular material mat-select.

//toppings is a form control name for mat-select
this.toppings.valueChanges.subscribe((selection) => { 

this.selected = '';

//includes because in case we are using multi selection we will receive selection as array

if(selection.includes('inprogress')) // if index instead of name use index value
this.selected = 'inprogress' // selected is globally defined variable
)}

checkUserSelection(topping){

if(this.selected === 'inprogress' && topping === 'open')"{
return true;
}
return false
}

----------------- Html Code ---------------------

<mat-form-field>
<mat-select placeholder="Toppings" 
[formControl]="toppings">

<mat-option *ngFor="let topping of list" 
<!-- Added null check for the topping field -->
[value]="topping?.id" 
[disabled]="checkUserSelection(topping)"
</mat-option>
</mat-select>

score 2 · Answer 3 · answered Nov 15 '20 at 14:18

I did it like this in HTML

      <mat-select [(ngModel)]="algorithm">
        <mat-option
          *ngFor="let algo of algos"
          [value]="algo.name"
          [disabled]="!algo.allow">
          {{ algo }}
        </mat-option>
      </mat-select>

and in ts

 algos = ['FIFO', 'LIFO'];
    somefunctionCall(){ // Map the Array
        const fifoAllowed = false;
        isAllowed = (algo) => algo === 'FIFO' ? fifoAllowed : true;
        this.algos = this.algos.map(a => ({ name: a, allow: isAllowed(a) })
)}

score 0 · Answer 4 · answered Jul 27 '18 at 09:22

0

You can disabled option in mat-select by putting condition as below :

<mat-form-field>
  <mat-select placeholder="Toppings" [(ngModel)]="selected" [formControl]="toppings">
    <mat-option *ngFor="let topping of list" [value]="topping.id" [disabled]="topping.id < selected.id">{{topping.name}}</mat-option>
  </mat-select>
</mat-form-field>

<br>

answered Jul 27 '18 at 09:22

Kishan

773
4
10

by defualt is the status is inprogress then open should be disbled – Prashant Pimpale Jul 27 '18 at 09:39
I have checked in stack Blitz and it is working fine.Where is creating issue? – Kishan Jul 27 '18 at 09:44
This doesn't really work - the logic from the original code is wrong. – G. Tranter Jul 27 '18 at 14:03
By default selected has value 2 (in progress) so open status (value = 1) is disabled because it is less than selected value. – Kishan Jul 28 '18 at 12:21
If you paste this code into the stackblitz example, it does not work at all. – G. Tranter Jul 30 '18 at 14:26
Please, always add a null check to your template fields so that your template won't break in any circumstance : topping?.id – Mehdi Fracso Jun 15 '20 at 11:07

How to disable particular option dynamically in Angular Mat-Select

4 Answers4