Angular 2 Options de la liste déroulante Valeur par défaut
Dans Angular 1, je pouvais sélectionner l'option par défaut pour une liste déroulante en utilisant les éléments suivants:
<select
data-ng-model="carSelection"
data-ng-options = "x.make for x in cars" data-ng-selected="$first">
</select>
Dans Angular 2 j'ai:
<select class="form-control" [(ngModel)]="selectedWorkout" (ngModelChange)="updateWorkout($event)">
<option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>
Comment puis-je sélectionner une option par défaut étant donné que mes données d'option sont:
[{name: 'arm'}, {name: 'back'}, {name:'leg'}] et ma valeur I par défaut est back?
Ajoutez une liaison à la propriété selected, comme ceci:
<option *ngFor="#workout of workouts" [selected]="workout.name == 'back'">{{workout.name}}</option>
Si vous assignez la valeur par défaut à selectedWorkout et utilisez [ngValue] (ce qui permet d'utiliser des objets comme valeur - sinon, seule la chaîne est prise en charge), il convient alors de faire ce que vous voulez:
<select class="form-control" name="sel"
[(ngModel)]="selectedWorkout"
(ngModelChange)="updateWorkout($event)">
<option *ngFor="let workout of workouts" [ngValue]="workout">
{{workout.name}}
</option>
</select>
Assurez-vous que la valeur que vous attribuez à selectedWorkout est la même instance que celle utilisée dans workouts. Une autre instance d'objet, même avec les mêmes propriétés et valeurs, ne sera pas reconnue. Seule l'identité de l'objet est vérifiée.
mettre à jour
Prise en charge angulaire ajoutée pour compareWith, ce qui facilite la définition de la valeur par défaut lorsque [ngValue] est utilisé (pour les valeurs d'objet)
À partir de la documentation https://angular.io/api/forms/SelectControlValueAccessor
<select [compareWith]="compareFn" [(ngModel)]="selectedCountries"> <option *ngFor="let country of countries" [ngValue]="country"> {{country.name}} </option> </select>
compareFn(c1: Country, c2: Country): boolean { return c1 && c2 ? c1.id === c2.id : c1 === c2; }
De cette manière, une (nouvelle) instance d'objet différente peut être définie comme valeur par défaut et compareFn permet de déterminer si elles doivent être considérées comme égales (par exemple, si la propriété id est identique.
il suffit de définir la valeur du modèle sur la valeur par défaut souhaitée:
selectedWorkout = 'back'
J'ai créé un fork de @Douglas 'plnkr here pour montrer les différentes manières d'obtenir le comportement souhaité dans angular2.
Ajoutez ce code à la position de la liste de sélection.
<option [ngValue]="undefined" selected>Select</option>
Vous pouvez approcher de cette façon:
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>
ou de cette façon:
<option *ngFor="let workout of workouts" [attr.value]="workout.name" [attr.selected]="workout.name == 'leg' ? true : null">{{workout.name}}</option>
ou vous pouvez définir la valeur par défaut de cette façon:
<option [value]="null">Please Select</option>
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>
ou
<option [value]="0">Please Select</option>
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>
Utilisez index pour afficher la première valeur par défaut
<option *ngFor="let workout of workouts; #i = index" [selected]="i == 0">{{workout.name}}</option>
Selon https://angular.io/api/forms/SelectControlValueAccessor vous avez simplement besoin des éléments suivants:
theView.html:
<select [compareWith]="compareFn" [(ngModel)]="selectedCountries">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
theComponent.ts
import { SelectControlValueAccessor } from '@angular/forms';
compareFn(c1: Country, c2: Country): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
J'ai eu un petit problème avec celui-ci, mais la solution suivante a été trouvée ... cela aidera peut-être quelqu'un.
Modèle HTML:
<select (change)="onValueChanged($event.target)">
<option *ngFor="let option of uifOptions" [value]="option.value" [selected]="option == uifSelected ? true : false">{{option.text}}</option>
</select>
Composant:
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
export class UifDropdownComponent implements OnInit {
@Input() uifOptions: {value: string, text: string}[];
@Input() uifSelectedValue: string = '';
@Output() uifSelectedValueChange:EventEmitter<string> = new EventEmitter<string>();
uifSelected: {value: string, text: string} = {'value':'', 'text':''};
constructor() { }
onValueChanged(target: HTMLSelectElement):void {
this.uifSelectedValue = target.value;
this.uifSelectedValueChange.emit(this.uifSelectedValue);
}
ngOnInit() {
this.uifSelected = this.uifOptions.filter(o => o.value ==
this.uifSelectedValue)[0];
}
}
Vous pouvez utiliser ce [ngModel] au lieu de [(ngModel)]et c'est Ok
<select class="form-control" **[ngModel]="selectedWorkout"** (ngModelChange)="updateWorkout($event)">
<option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>
Vous pouvez faire comme ci-dessus:
<select class="form-control"
[(ngModel)]="selectedWorkout"
(ngModelChange)="updateWorkout($event)">
<option *ngFor="#workout of workouts;
let itemIndex = index"
[attr.selected]="itemIndex == 0">
{{workout.name}}
</option>
</select>
Comme vous pouvez le voir dans le code ci-dessus, l'attribut sélectionné de l'option de répétition est défini lors de la vérification de l'index de la boucle de liste répétée. [attr. <nom d'attribut html>] est utilisé pour définir l'attribut html dans angular2.
Une autre approche consiste à définir la valeur du modèle dans le fichier TypeScript comme suit:
this.selectedWorkout = this.workouts.length > 0
? this.workouts[0].name
: 'No data found';//'arm'
Complétant complètement les autres articles, voici ce qui fonctionne dans Angular2 quickstart,
Pour définir le DOM par défaut: avec *ngFor, utilisez une instruction conditionnelle dans l'attribut <option>'s selected.
Pour définir la valeur par défaut de Control: utilisez son argument constructeur. Autrement, avant un onchange lorsque l'utilisateur sélectionne à nouveau une option, qui définit la valeur du contrôle avec l'attribut value de l'option sélectionnée, la valeur du contrôle sera null.
scénario:
import {ControlGroup,Control} from '@angular/common';
...
export class MyComponent{
myForm: ControlGroup;
myArray: Array<Object> = [obj1,obj2,obj3];
myDefault: Object = myArray[1]; //or obj2
ngOnInit(){ //override
this.myForm = new ControlGroup({'myDropdown': new Control(this.myDefault)});
}
myOnSubmit(){
console.log(this.myForm.value.myDropdown); //returns the control's value
}
}
balisage:
<form [ngFormModel]="myForm" (ngSubmit)="myOnSubmit()">
<select ngControl="myDropdown">
<option *ngFor="let eachObj of myArray" selected="eachObj==={{myDefault}}"
value="{{eachObj}}">{{eachObj.myText}}</option>
</select>
<br>
<button type="submit">Save</button>
</form>
Ajoutez la propriété de liaison sélectionnée, mais assurez-vous de la rendre nulle pour les autres champs, par exemple:
<option *ngFor="#workout of workouts" [selected]="workout.name =='back' ? true: null">{{workout.name}}</option>
Maintenant ça va marcher
<select class="form-control" name='someting' [ngModel]="selectedWorkout" (ngModelChange)="updateWorkout($event)">
<option value="{{workout.name}}" *ngFor="#workout of workouts">{{workout.name}}</option>
</select>
Si vous utilisez un formulaire, le champ name doit se trouver dans la balise select.
Tout ce que vous avez à faire est d’ajouter value à la balise option.
selectedWorkout value devrait être "back", et c'est fait.
fonctionne très bien comme on le voit ci-dessous:
<select class="form-control" id="selectTipoDocumento" formControlName="tipoDocumento" [compareWith]="equals"
[class.is-valid]="this.docForm.controls['tipoDocumento'].valid &&
(this.docForm.controls['tipoDocumento'].touched || this.docForm.controls['tipoDocumento'].dirty)"
[class.is-invalid]="!this.docForm.controls['tipoDocumento'].valid &&
(this.docForm.controls['tipoDocumento'].touched || this.docForm.controls['tipoDocumento'].dirty)">
<option value="">Selecione um tipo</option>
<option *ngFor="let tipo of tiposDocumento" [ngValue]="tipo">{{tipo?.nome}}</option>
</select>
Étape: 1 Créez les propriétés déclarent la classe
export class Task {
title: string;
priority: Array<any>;
comment: string;
constructor() {
this.title = '';
this.priority = [];
this.comment = '';
}
}
Tige: 2 Votre classe de composants
import { Task } from './task';
export class TaskComponent implements OnInit {
priorityList: Array<any> = [
{ value: 0, label: '✪' },
{ value: 1, label: '★' },
{ value: 2, label: '★★' },
{ value: 3, label: '★★★' },
{ value: 4, label: '★★★★' },
{ value: 5, label: '★★★★★' }
];
taskModel: Task = new Task();
constructor(private taskService: TaskService) { }
ngOnInit() {
this.taskModel.priority = [3]; // index number
}
}
Étape: 3 Afficher le fichier .html
<select class="form-control" name="priority" [(ngModel)]="taskModel.priority" required>
<option *ngFor="let list of priorityList" [value]="list.value">
{{list.label}}
</option>
</select>
Sortie:
Ajoutez à la réponse de @Matthijs, assurez-vous que votre élément select a un attribut name et que son name est unique dans votre modèle HTML. Angular 2 utilise le nom de l'entrée pour mettre à jour les modifications. Ainsi, s'il existe des noms dupliqués ou qu'aucun nom n'est associé à l'élément d'entrée, la liaison échouera.
Si vous ne voulez pas la liaison bidirectionnelle via [(ngModel)], procédez comme suit:
<select (change)="selectedAccountName = $event.target.value">
<option *ngFor="let acct of accountsList" [ngValue]="acct">{{ acct.name }}</option>
</select>
Je viens de tester mon projet sur Angular 4 et ça marche! AccountsList est un tableau d'objets Account dans lequel le nom est une propriété de Account.
Observation intéressante:
[ngValue] = "acct" exerce le même résultat que [ngValue] = "acct.name".
Je ne sais pas comment Angular 4 l’accomplir!