web-dev-qa-db-fra.com

Comment désactiver dynamiquement une option particulière dans Angular Mat-Select

J'ai la liste avec name et id comme:

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

Et en utilisant MatSelect avec * ngFor pour parcourir un tableau et lier l'état actuel avec select en utilisant [(ngModel)].

Production attendue:

Si l'état actuel est inprogress, désactivez l'option open

Exemple StackBlitz

angularangular-material2angular-material-5
3
Prashant Pimpale

L'exemple ne fonctionne pas correctement car selected est lié à [value]="topping.id", mais la logique utilise selected.id qui n'existe que lors du démarrage car vous initialisez selected avec un objet topping.

En outre, la logique [disabled]="topping.id < selected.id" est peut-être défectueux car il désactive également inprogress lorsque close est sélectionné - vous le voudrez peut-être - je ne suis pas sûr - mais vous avez seulement dit que vous vouliez désactiver open lorsque inprogress est sélectionné.

Utilisez soit [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>

Ou changez la logique et l'initialisation de 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>
2
G. Tranter

si l'utilisateur peut sélectionner plusieurs options, nous n'avons pas vraiment besoin de ngModel également, voici ma solution pour désactiver certaines options lors de la sélection d'une option différente dans 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
}

----------------- Code HTML ---------------------

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

<mat-option *ngFor="let topping of list" 
[value]="topping.id" 
[disabled]="checkUserSelection(topping)"
</mat-option>
</mat-select>
0
Nikhil Kamani

Vous pouvez désactiver l'option dans mat-select en mettant la condition comme ci-dessous:

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