web-dev-qa-db-fra.com

Comment désélectionner l'option sélectionnée dans md-select Angular2

Dans material2 lorsqu'une sélection est initialisée, aucune valeur par défaut n'est sélectionnée. Si l'utilisateur sélectionne une valeur, il ne peut pas la désélectionner. Je veux permettre à l'utilisateur de désélectionner la valeur.

Plunkr

J'ai parcouru le aide déjà disponible mais je n'ai pas pu l'utiliser.

<mat-select id="formal"  formControlName="formal" placeholder="Default - No value selected">
   <mat-option value="1">formal</mat-option>
   <mat-option value="2">informal</mat-option>
</mat-select>
angularangular-material2
9
Mahin Khan

J'ai fini par utiliser ngModel et définir cette valeur sur undefined pour obtenir le résultat requis.

<md-select id="formal" [(ngModel)]="selectedValue" formControlName="formal" placeholder="Default - No value selected">
    <md-option value="1">formal</md-option>
    <md-option value="2">informal</md-option>
 </md-select>

<div  (click)="unselect()">click me to clear md select</div>

Dans le composant

unselect(): void {
   this.selectedValue = undefined;
}

plunkr pour la réponse.

13
Mahin Khan

Qu'en est-il de l'utilisation d'une méthode matSelect.

onChange (événement) {

const matSelect: MatSelect = event.source;
matSelect.writeValue(null);

....

8
Sébastien Richez

Si vous utilisez angular, vous pouvez toujours patchValue à '' comme ci-dessous.

Tout d'abord, l'élément select. Cet exemple utilise Ionic, mais c'est la même chose que Angular.

<ion-select formControlName="formal" item-start>
   <ion-option *ngFor="let option of input.options" value="{{option}}">{{option}}</ion-option>
</ion-select>

<ion-icon color="danger" name="close" (click)="unselect('formal')" item-end></ion-icon>

Où form est un FormGroup.

  form: FormGroup;

Et la méthode unselect corrige une valeur nulle.

  unselect(id: string): void {
    let reset = {};
    reset[id] = ''
    this.form.patchValue(reset);
  }

Meilleures salutations!

3
Guilherme Sampaio

J'ai une autre solution qui, je pense, mérite d'être mentionnée: ajoutez un <md-option> Et reset le <md-select> Vide sur son click

  <md-select id="formal" formControlName="formal" placeholder="Default - No value selected">
      <md-option (click)="form.controls.formal.reset()"></md-option>
      <md-option value="1">formal</md-option>
      <md-option value="2">informal</md-option>
  </md-select>

de cette façon, vous n'avez pas besoin de code personnalisé dans votre Component ni utilisez ngModel

voir Plunker

2
Elmer Dantas

un peu en retard mais j'ajoute juste une option comme première pour permettre à l'utilisateur d'effacer la liste déroulante

<mat-form-field>
      <mat-select placeholder="Parent Organisation" [formControl]="form.controls['parentOrganisationId']">
        <mat-option *ngIf="form.controls['parentOrganisationId'].value" [value]="null">Clear</mat-option>
        <mat-option *ngFor="let option of organisations$ | async" [value]="option.id">
          {{ option.description }}
        </mat-option>
      </mat-select>
    </mat-form-field>
1
Jan Feyen

Ajoutez ceci à vos options et voyez la magie

      <mat-option>Clear</mat-option>

source: https://material.angular.io/components/select/examples

0
Prashant sharma

Je développe ce travail autour (je travaille aussi avec des formulaires donc ...), en définissant la valeur sur undefined pour réinitialiser le mat-select.

HTML 

<mat-form-field>
          <mat-label>Add roles</mat-label>
          <mat-select formControlName="rolesFormCtrlStepper3" (selectionChange)="createRole($event.value)">
                <mat-option *ngFor="let roleComboBox of rolesComboBox" [value]="roleComboBox">
                             {{roleComboBox}}
                </mat-option>
           </mat-select>
</mat-form-field>

TS 

createRole(r) {
...
...
    this.formArray.get([2]).get('rolesFormCtrlStepper3').setValue(undefined);
}
0
ferto31
<mat-form-field appearance="outline">
            <mat-label>Deal</mat-label>
            <mat-select>
              <mat-option>None</mat-option>
              <mat-option *ngFor="let object of somelist" [value]="object">{{object.property}}</mat-option>
            </mat-select>
</mat-form-field>
0
Samir Ghoneim

Mise à jour de la réponse acceptée à Angular 6:

<mat-form-field>
    <mat-select id="formal" [(value)]="selectedValue"  placeholder="Default - No value selected">
        <mat-option value="1">formal</mat-option>
        <mat-option value="2">informal</mat-option>
    </mat-select>
</mat-form-field>

<div  (click)="selectedValue = null">click me to clear md select</div>
0
mattavatar