77 votes

Définir l'option par défaut dans mat-select

J'ai un simple champ de formulaire avec option de sélection dans mon projet Angular material :

composant.html

  <mat-form-field>
    <mat-select [(value)]="modeSelect" placeholder="Mode">
      <mat-option value="domain">Domain</mat-option>
      <mat-option value="exact">Exact</mat-option>
    </mat-select>
  </mat-form-field>

[(value)]="modeSelect" est lié à la propriété modeSelect dans le fichier component.ts

Je veux faire en sorte que le <mat-option value="domain">Domain</mat-option> est sélectionné par défaut au chargement de la page.

ng-selected ne fonctionne pas pour moi

107voto

Narm Points 4480

Travailler avec StackBlitz

Pas besoin d'utiliser ngModel ou Formulaires

Dans votre html :

 <mat-form-field>
  <mat-select [(value)]="selected" placeholder="Mode">
    <mat-option value="domain">Domain</mat-option>
    <mat-option value="exact">Exact</mat-option>
  </mat-select>
</mat-form-field>

et dans votre composant, définissez simplement votre propriété publique selected à la valeur par défaut :

selected = 'domain';

0 votes

Bonjour ! Merci pour la réponse, voici ce que j'ai obtenu lorsque j'ai essayé : Impossible de se lier à 'selected' car ce n'est pas une propriété connue de 'mat-option'.

0 votes

ah semble fonctionner dans votre exemple, mais pas pour le mien. y a-t-il un module particulier que je dois importer dans mon appmodule.ts ?

0 votes

Quelle version d'Angular et d'Angular Material utilisez-vous ?

19voto

Vikas Points 7185

Essayez ceci

<mat-form-field>
    <mat-select [(ngModel)]="modeselect" [placeholder]="modeselect">
        <mat-option value="domain">Domain</mat-option>
        <mat-option value="exact">Exact</mat-option>
    </mat-select>
</mat-form-field>

Composant :

export class SelectValueBindingExample {
    public modeselect = 'Domain';
}

Démonstration en direct

N'oubliez pas non plus d'importer FormsModule dans votre module d'application

0 votes

Bonjour, cela rend la propriété modeselect = 'domain' mais il ne semble pas que l'option domain soit sélectionnée par défaut.

2 votes

J'ai mis à jour ma réponse, veuillez vérifier le fonctionnement de stackblitz.

0 votes

Bonjour Vikas, il y a des valeurs dynamiques dans *ngFor that time comment montrer en utilisant l'id ?

1voto

yer Points 932

Essayez ça :

<mat-select [(ngModel)]="defaultValue">
export class AppComponent {
  defaultValue = 'domain';
}

0 votes

Bonjour, j'obtiens cette erreur lorsque j'essaie votre réponse : Erreur : Si ngModel est utilisé dans une balise de formulaire, soit l'attribut name doit être défini, soit le contrôle de formulaire doit être défini comme "autonome" dans ngModelOptions.

0 votes

Avez-vous un champ de type "mat-form" ?

1voto

meol Points 439
I was able to set the default value or whatever value using the following:

Template:
          <mat-form-field>
              <mat-label>Holiday Destination</mat-label>
              <mat-select [(ngModel)]="selectedCity" formControlName="cityHoliday">
                <mat-option [value]="nyc">New York</mat-option>
                <mat-option [value]="london">London</mat-option>
                <mat-option [value]="india">Delhi</mat-option>
                <mat-option [value]="Oslo">Oslo</mat-option>
              </mat-select>
          </mat-form-field>

Component:

export class WhateverComponent implements OnInit{

selectedCity: string;    

}

ngOnInit() {
    this.selectedCity = 'london';
} 

}

-1voto

Irrfan23 Points 62

HTML

<mat-form-field>
<mat-select [(ngModel)]="modeSelect" placeholder="Mode">
  <mat-option *ngFor="let obj of Array"  [value]="obj.value">{{obj.value}}</mat-option>
</mat-select>

Maintenant, définissez votre valeur par défaut à

modeSelect

où vous obtenez les valeurs dans la variable Array.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X