J'essaie d'obtenir l'option Texte de sélection du contrôle de sélection dans Angular 4.
HTML:
<div class="col-sm-6 form-group">
<label>Industry</label>
<select class="form-control select" formControlName="Industry">
<option value="">Please select Value</option>
<option *ngFor="let industry of industries"
[ngValue]="industry.ID">{{industry.Name}}
</option>
</select>
</div>
upload.component.ts
this.form.controls['Industry'].valueChanges.subscribe((name) => {
this.form.controls['IndustryName'].setValue(name);
});
J'utilise la propriété formControlName de Reactive.
Veuillez suggérer l’idée de récupérer le texte du contrôle Sélectionné.
Le moyen le plus simple d'y parvenir est d'obtenir l'id du code HTML, de déclencher un événement avec la valeur id, puis de rechercher l'élément dans votre collection.
HTML
<select class="form-control" [(ngModel)]="selectedStatusId" (change)="setSelectedStatus(selectedStatusId)">
<option *ngFor="let status of statusList" [value]="status.id">{{status.name}}
</option>
</select>
TypeScript
public setSelectedStatus(value: string): void {
if (this.statusList && value) {
let status: ListItemSimplified = this.statusList.find(s => s.id == value);
if (status)
this.selectedStatus = status.name;
}
else
this.selectedStatus = '';
}
Classe de modèle
export class ListItemSimplified {
id: string;
name: string;
}
getSelectedOptionText(event: Event) {
let selectedOptions = event.target['options'];
let selectedIndex = selectedOptions.selectedIndex;
let selectElementText = selectedOptions[selectedIndex].text;
console.log(selectElementText)
}
HTML
<select class="form-control select" formControlName="Industry" (change)="getSelectedOptionText($event)">
<option value="">Please select Value</option>
<option *ngFor="let industry of industries" value="{{industry.ID}}">{{industry.Name}}</option>
</select>
Vous pouvez simplement obtenir la valeur et le texte sélectionnés à l'aide de la propriété $ event
code HTML
<label>Select Market</label><br/>
<select class="user-preselect btn-add" style="width: 90%;height: 34px;"(change)="selectchange($event)">
<option value="0" selected="selected">ADD Market</option>
<option *ngFor="let country of Countrylist" [value]="country.id" >{{country.name}}</option>
</select><br/><br/>
Code de typeScript
selectchange(args){
this.countryValue = args.target.value;
this.countryName = args.target.options[args.target.selectedIndex].text;
}
Essayez ce qui suit:
upload.component.html
<form [formGroup]="form">
<div class="col-sm-6 form-group">
<label>Industry</label>
<select class="form-control select"
formControlName="industry" (change)="onChange()">
<option value="">Please select Value</option>
<option *ngFor="let industry of industries"
[ngValue]="industry.id">{{ industry.name }}
</option>
</select>
</div>
</form>
upload.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: [ './upload.component.css' ]
})
export class UploadComponent implements OnInit {
form: FormGroup;
select: FormControl;
industries = [
{id: 1, name: 'Mining'},
{id: 2, name: 'Information Technology'},
{id: 3, name: 'Entertainment'}
];
ngOnInit(){
this.createForm();
}
createForm() {
this.select = new FormControl('');
this.form = new FormGroup({
select: this.select
});
}
onChange() {
console.log(this.select.value);
# to get the name that was selected
const id = parseInt(this.select.value, 0);
const selected = this.industries
.filter(industry => industry.id === id)
.reduce(function(str: string, project) {
return str + project.name;
}, '');
console.log(selected.name);
}
}
J'espère que cela aide et à l'heure. :)
Vous pouvez utiliser
<select class="form-control" (change)="onChange($event)">
</select>
puis dans le composant
onChange($event){
let text = $event.target.options[$event.target.options.selectedIndex].text;
}
Vous pouvez simplement faire:
Dans votre vue
<select class="select" (change)="onChange($event.target.value)" [(ngModel)]="someObject.BoundItem" name="BoundItem" #BoundItem="ngModel">
<option *ngFor="let item of myObject" [value]="item.Id">{{item.displayiItem}}</option>
</select>
Dans votre composant
onChange(selectedId: number)
{
this.selectedItem = this.myObject.find((x: any) => x.Id == selectedId);
console.log(this.selectedItem["displayItem");
}
Apportez les modifications suivantes
Modèle
<form [formGroup]="test">
<div class="col-sm-6 form-group">
<label>Industry</label>
<select class="form-control select" formControlName="Industry">
<option *ngFor="let industry of industries" [ngValue]="industry.id">{{industry.id}} </option>
</select>
</div>
</form>
<pre>{{test.value | json}} </pre>
Composant
import { Component,OnInit } from '@angular/core';
import {FormArray, FormGroup, FormControl, Validators} from "@angular/forms";
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Angular 5';
test:FormGroup;
industries = [{id:1},{id:2}];
ngOnInit(){
this.test = new FormGroup({
Industry:new FormControl('')
});
this.test.get('Industry').valueChanges.subscribe(data => console.log(data));
}
}