Définir la valeur par défaut dans Angular

1. Définir la valeur par défaut dans Angular
2. Définir la valeur par défaut à partir d’un tableau d’options dans Angular
3. Sélectionnez la valeur par défaut à partir des valeurs dynamiques dans Angular

Nous apprendrons comment définir une valeur par défaut dans un formulaire select, définir une valeur par défaut à partir d’un tableau d’options et définir une valeur par défaut si les options sont dynamiques dans Angular.

Définir la valeur par défaut dans Angular

Ce didacticiel explique comment définir une valeur par défaut pour une balise de sélection dans Angular. Aucune valeur par défaut n’est automatiquement sélectionnée lors de la création d’un formulaire select avec plusieurs options.

Par conséquent, nous allons d’abord créer un formulaire de sélection et définir une valeur par défaut, et nous discuterons de différents scénarios sur la meilleure façon de définir une valeur par défaut lorsque les options sont statiques ou dynamiques ou lorsque nous avons un tableau d’options.

Dans app.component.html, nous allons créer un formulaire select.

# angular
<select [(ngModel)]='ngSelect' name="selectOption" id="selectOption" class='form-control'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Nous allons ajouter du CSS dans app.component.css pour améliorer l’apparence de notre formulaire select.

# angular
.form-control{
  padding: 5px 10px;
  background-color: DodgerBlue;
  color: white;
  border-color: black;
  width: 100px;
  height: 30px;
}
option:hover{
  background-color: white;
  color: dodgerblue;
}

Production :

Vous pouvez voir qu’aucune valeur par défaut n’est sélectionnée, mais toutes les options apparaissent lorsque nous cliquons dessus.

Pour définir n’importe quelle valeur par défaut, nous pouvons attribuer la valeur à la variable ngSelect dans app.component.ts. Si vous voyez notre code depuis app.component.html, vous pouvez voir que nous avons déjà attribué la variable [(ngModel)]='ngSelect'.

Essayons maintenant de définir 1 comme valeur par défaut.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngSelect = 1;
}

Après avoir attribué la valeur par défaut, nous remarquerons que le formulaire de sélection affiche 1 comme valeur par défaut actuelle. De cette façon, nous pouvons sélectionner n’importe quelle valeur comme valeur par défaut dans Angular.

Production :

Définir la valeur par défaut à partir d’un tableau d’options dans Angular

Nous discuterons de la définition d’une valeur par défaut à partir d’un tableau d’options.

Tout d’abord, nous allons créer deux variables : ngSelect, l’option par défaut de notre formulaire de sélection, et la seconde sera options qui aura toutes les valeurs que nous voulons afficher dans les options de sélection.

Ajoutons ce code dans app.component.ts.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  options = [1,2,3,4,5,6,7,8,9,10]
  ngSelect = 1;
}

Dans le tableau options, nous définissons des valeurs de 1 à 10 ; dans ngSelect, nous définissons 1 comme valeur par défaut.

Nous allons créer le formulaire de sélection dans app.component.html.

# angular
<select class='form-control' id="selectOptions">
<option *ngFor="let opt of options"
[selected]="opt === ngSelect"
[value]="opt">
    {{ opt }}
</option>
</select>

Dans ce code, vous pouvez voir que nous avons défini [selected] sur ngSelect, donc lorsqu’une option est identique à ngSelect, elle sera automatiquement sélectionnée.

Production :

Sélectionnez la valeur par défaut à partir des valeurs dynamiques dans Angular

Nous discuterons de la définition d’une valeur par défaut si nous avons des valeurs dynamiques pour les options.

Tout d’abord, nous allons créer deux variables : ngSelect, l’option par défaut de notre formulaire de sélection, et la seconde sera options qui aura toutes les valeurs que nous voulons afficher dans les options de sélection.

Nous savons qu’il y aura des valeurs dynamiques, alors prenons un tableau de nombres aléatoires et définissons la valeur par défaut pour le premier élément de ce tableau.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  options = [3,6,1,4,2,10,7,5,9,8]
  ngSelect = this.options[0];
}

app.component.html aura le code suivant.

# angular
<select class="form-control" id="selectOptions">
  <option
    *ngFor="let opt of options"
    [selected]="opt === ngSelect"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

Production :

Vous pouvez voir que le premier élément de ce tableau est défini comme valeur par défaut. Nous pouvons changer cela en changeant l’index d’un tableau.

Ce tutoriel nous a appris à définir la valeur par défaut du formulaire select dans Angular. Nous avons également discuté de trois valeurs par défaut avec des valeurs statiques, dynamiques ou de tableau.