web-dev-qa-db-fra.com

Définir l'option par défaut dans Mat-Select

J'ai un champ de formulaire d'option de sélection simple dans mon projet de matériau angulaire:

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>

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

Je veux que le <mat-option value="domain">Domain</mat-option> soit sélectionné par défaut lors du chargement de la page.

ng-selected n'a pas fonctionné pour moi

angularangular-material
4
cup_of

StackBlitz de travail

Inutile d'utiliser ngModel ou les 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 sur la valeur par défaut:

selected = 'domain';

8
Narm

Essaye ça

<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émo en direct

De plus, n'oubliez pas d'importer FormsModule dans votre app.module

4
Vikas

Essaye ça:

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