web-dev-qa-db-fra.com

Angular4 espace réservé pour une sélection

J'essaie d'ajouter un espace réservé à une sélection sur Angular 4 mais aucun moyen de la faire fonctionner 

Voici mon code:

<select name="edit" [(ngModel)]="edit">
        <option [ngValue]="null" disabled [selected]="true"> Please select one option </option>
        <option *ngFor="let select of list" [ngValue]="edit"> {{ select }}</option>
</select>


export class AppComponent  {
  list: any[] = ['1', '2', '3'];
  edit: any;
}
angularselect
9
Zak

J'ai créé plunker . J'espère que cela vous aidera.

 <select name="edit" [(ngModel)]="edit">
    <option [ngValue]="undefined" disabled  selected> Please select one option </option>
    <option *ngFor="let select of list" [ngValue]="edit"> {{ select }}</option>
  </select>
export class AppComponent  {
  list: any[] = ['1', '2', '3'];
  edit: any;
}
23
alexKhymenko

Je sais que c’est une vieille question et une réponse a été choisie, mais j’ai pensé qu’il y avait une petite amélioration que je pourrais ajouter. Incluez "caché" dans votre espace réservé et cela devrait éliminer sa visibilité dans la liste déroulante.

<select name="edit" [(ngModel)]="edit">
   <option value="0" disabled selected hidden>Select your option</option>
   <option *ngFor="let select of list" [value]="select"> {{ select }}</option>
</select>
2
jgritten

Si vous souhaitez que l’espace réservé soit sélectionné par défaut:

<select name="edit" [(ngModel)]="edit">
    <option value="0" disabled selected>Select your option</option>
    <option *ngFor="let select of list" [value]="select"> {{ select }}</option>
</select>

DEMO

1
Vega

Au lieu de pirater le <options> de votre sélection, essayez d’utiliser CSS pour placer le texte superposé à la boîte et un *ngIf pour masquer cet espace réservé quand il y a une valeur.

<div class="form-group rel">
    <span class="form-control placeholder" *ngIf="!fruitSelect.value">Fruit...</span>
    <select class="form-control" formControlName="fruitSelect" id="fruitSelect" #fruitSelect>
        <option *ngFor="let fruit of fruits" [value]="fruit.value">{{fruit.key}}</option>
    </select>
    <span class="err" *ngIf="hasErr('fruitSelect', 'required')">Fruit is required</span>
</div>

CSS:

.rel {
    position: relative;
}

.placeholder {
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    max-width: 90%; // don't cover the dropdown's arrow
    border-right: none;
}

La classe rel permet simplement à position:absolute de fonctionner. pointer-events veille à ce que l'espace réservé ne perde pas les clics de souris. max-width garantit que l'opacité n'affectera pas la flèche vers le bas du contrôle déroulant sous-jacent, et border-right annule simplement ce que form-control, une classe d'amorçage, a fait. 

Si vous n'utilisez pas bootstrap, remplacez form-control par ce que vous utilisez, mais essayez de placer cette classe à la fois sur le contrôle et sur l'espace réservé span pour que leur taille et leur couleur correspondent. 

Angular utilise la variable de modèle #fruitSelect pour vérifier la valeur dans la liste déroulante, que la portée de mise en place vérifie avec *ngIf pour savoir quand disparaître.

0
Ron Newcomb

pouvez-vous essayer ceci, dans le modèle 

<select name="edit" [(ngModel)]="edit">
    <option value=""> Please select one option </option>
    <option *ngFor="let select of list" value="{{select}}"> {{ select }}</option>
</select>

votre composant.ts 

edit: string = '';
0
Robert

nous pouvons ajouter une option fictive comme espace réservé qui peut être masqué dans l'option déroulante . Nous pouvons ajouter un icône de liste déroulante personnalisée comme arrière-plan qui remplace la liste déroulante du navigateur icône.

Le astuce consiste à activer la marque de réservation css uniquement lorsque la valeur n'est pas sélectionnée _

Le code ci-dessous s'explique.

/ ** Mon modèle de composant * /

 <div class="dropdown">
      <select [ngClass]="{'placeholder': !myForm.value.myField}"
 class="form-control" formControlName="myField">
        <option value="" hidden >Select a Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>

/ ** Mon Composant.TS * /

constructor(fb: FormBuilder) {
  this.myForm = this.fb.build({
    myField: ''
  });
}

/**global.scss*/

.dropdown {
  width: 100%;
  height: 30px;
  overflow: hidden;
  background: no-repeat white;
  background-image:url('angle-arrow-down.svg');
  background-position: center right;
  select {
    background: transparent;
    padding: 3px;
    font-size: 1.2em;
    height: 30px;
    width: 100%;
    overflow: hidden;

    /*For moz*/
    -moz-appearance: none;
    /* IE10 */
    &::-ms-expand {
      display: none;
    }
    /*For chrome*/
    -webkit-appearance:none;
    &.placeholder {
      opacity: 0.7;
      color: theme-color('mutedColor');
    }
    option {
      color: black;
    }
  }
}
0
Mukundhan