web-dev-qa-db-fra.com

Angular 7: Effacer la sélection avec le bouton x sur une liste déroulante

Je pensais pouvoir combiner les exemples de Angular for dropdown and the Input with clear box to:

<mat-form-field >
  <mat-select placeholder="Country" [(value)]="selectedCountry" (selectionChange)="emitItemChanges()">
    <div *ngFor="let item of lstItems|async">
      <mat-option *ngIf="addItem(item)" [value]="item">{{item.title}}</mat-option>
    </div>
  </mat-select>
  <button mat-button *ngIf="selectedCountry" matSuffix mat-icon-button aria-label="Clear" 
    (click)="selectedCountry=undefined">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

Qui fonctionne comme prévu

enter image description here

qui efface l'entrée. Le problème auquel je suis confronté maintenant est qu'il ouvre immédiatement la boîte de sélection. Quoi qu'il en soit, comment empêcher ce comportement?

Je sais qu'il existe d'autres solutions pour effacer la sélection. Je veux savoir si cette approche est possible?

angularangular-materialangular7
9
LeO

(click)="selectedCountry=undefined; $event.stopPropagation()" aidé! Merci à @Sachila :-)

Le code complet ressemble donc à:

  <button mat-button *ngIf="selectedCountry" matSuffix mat-icon-button 
    aria-label="Clear" (click)="selectedCountry=undefined; $event.stopPropagation()">
  <mat-icon>close</mat-icon>
8
LeO

Exemple pour les formulaires réactifs

$event.stopPropagation() - ne s'ouvre plus sélectionner à nouveau

       <mat-form-field>
         <mat-select formControlName="team" placeholder="Team">
           <mat-option *ngFor="let team of availableTeams" [value]="team.id">{{team.name}}</mat-option>
         </mat-select>
         <button *ngIf="form.controls.team.value"
                 matSuffix
                 mat-icon-button
                 type="button"
                 aria-label="Clear"
                 (click)="form.controls.team.setValue(null); $event.stopPropagation()">
           <mat-icon>close</mat-icon>
         </button>
        </mat-form-field>
0
Ania