Angular4 espace réservé pour une sélection

Je suis en train d'ajouter un espace réservé à une sélection sur Angulaire 4 mais pas moyen d'en faire des œuvres,

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;
}

OriginalL'auteur error | 2017-09-11

angular select

J'ai créé plunker. Espérons que cela vous aide.

 <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;
}

Merci, l'erreur venait de l' [ngValue]="null", doit être [ngValue]="undefined"
cela fonctionne pour moi... merci 🙂

OriginalL'auteur alexKhymenko

Si vous souhaitez avoir l'espace réservé sélectionnée 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>

DÉMO

OriginalL'auteur Vega

2

Je sais que c'est une vieille question et une réponse a été sélectionnée, mais j'ai senti qu'il y avait une petite amélioration que je pourrais ajouter. Inclure "caché" sur votre espace réservé et qui devrait l'éliminer d'être visible 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>
```
OriginalL'auteur jgritten

pouvez-vous essayer cela, 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 = '';

OriginalL'auteur Robert

0

Au lieu de piratage de votre sélectionnez l' <options>, essayez d'utiliser CSS pour placer du texte qui se chevauchent dans la zone, et une *ngIf à cacher que l'espace réservé span 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 rel classe tout à fait position:absolute travail. pointer-events assure l'espace réservé span refuse de manger des clics de souris. max-width assure l'opacité n'affectera pas le sous-jacent de contrôle déroulant de la flèche vers le bas, et border-right est juste de défaire ce form-control, une classe de bootstrap, n'.

Si vous n'êtes pas en utilisant bootstrap puis remplacer form-control avec tout ce que vous utilisez, mais essayez de mettre de la catégorie à la fois le contrôle et l'espace réservé span afin de leur dimensionnement et de coloration du match.

Angulaire utilise le #fruitSelect variable de modèle pour vérifier la valeur dans la liste déroulante, le placeholding span vérifie avec *ngIf savoir quand à disparaître.

OriginalL'auteur Ron Newcomb

nous pouvons ajouter un mannequin option comme espace réservé qui peut être caché dans l'option de liste déroulante.
On peut ajouter un personnalisé déroulante de l'icône de comme arrière plan qui remplace navigateur déroulant icône.

La truc est à activer espace réservé css uniquement lorsque valeur n'est pas sélectionné

Code ci-dessous explique de lui-même.

/**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;
    }
  }
}

OriginalL'auteur Mukundhan

Vous devez vous connecter pour publier un commentaire.