J'ai un mat-select et je veux désactiver les options une fois que je les ai sélectionnées. Par exemple : si je sélectionne l'heure, l'heure doit être désactivée dans la sélection de tapis suivante. J'ai créé un stackblitz https://stackblitz.com/edit/angular-anus7w?file=app%2Fselect-overview-example.ts de mon exigence. Actuellement , seule la clé est désactivée. Cependant, dans mon cas, les données déroulantes seront désormais générées dynamiquement et je ne peux pas coder en dur les valeurs qui doivent être désactivées.
Donc, ce que je veux, c'est que si je sélectionne une valeur purticulaire dans mat-select 1, cette valeur devrait être désactivée dans mat-select 2. De même, la valeur que je sélectionne
Vous devez d'abord lier [(ngModel)]="firstOption"le formulaire et ensuite effectuer la validation. Aucun événement de modification n'est requis ici
Dans le componentfichier :
firstOption = '';
secondOption = '';
thirdOption = '';
fourthOption = '';
Dans le fichier html du modèle
<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 />
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots