如何在下拉angular2中获取标签字符串作为formControl值?
Posted
技术标签:
【中文标题】如何在下拉angular2中获取标签字符串作为formControl值?【英文标题】:How to get the label string as formControl value in dropdown angular2? 【发布时间】:2017-09-03 13:17:53 【问题描述】:这是我想要实现的,我想将标签字符串作为我的 formControl 值,但我也需要选择更改的事件,这是我需要更改时的值,这是我的代码:
html:
<form [formGroup]="form">
<select class="form-control" [(ngModel)]="selectedListKota" #t (change)="ZonaChanged(t.value)" formControlName="nama_zona">
<option *ngFor="let lz of listKota" [value]="lz.value">
lz.label
</option>
</select>
</form>
这是我的 app.component.ts :
constructor(private frmInputMasterBassService: FrmInputMasterBassService, private formBuilder: FormBuilder)
this.sStorage = sessionStorage.getItem('mAuth');
this.sStorage = JSON.parse(this.sStorage);
this.frmInputMasterBassService.getKotaList().subscribe(
data =>
this.data = data.json();
for (var i = 0; i < this.data.length; i++)
this.listKota.push(label:this.data[i].KOTA, value:this.data[i].PROVINSI);
this.selectedListKota = this.listKota[0].value;
,
err =>
console.log(err);
);
this.form= this.formBuilder.group(
nama_bass: ['', Validators.nullValidator],
alamat_bass: ['', Validators.nullValidator],
nomor_telepon: ['', Validators.nullValidator],
nama_zona: ['', Validators.nullValidator],
contact_person: ['', Validators.nullValidator],
email: ['', Validators.nullValidator]
)
ZonaChanged(value)
console.log(value);
this.zona = value;
这是我的 listKota 数组 JSON 的样子:
[
"label": "AGAM",
"value": "Sumatera Barat"
,
"label": "AIR MOLEK",
"value": "Riau"
]
当我想选择 AGAM 时,我的表单 JSON 将如下所示:
"nama_bass": "",
"alamat_bass": "",
"nomor_telepon": "",
"nama_zona": "Sumatera Barat",
"contact_person": "",
"email": ""
我想要的“nama_zona”指向 AGAM,而不是“Sumatra Barat”,当事件(已更改)触发时,如何在不更改值的情况下更改它
【问题讨论】:
【参考方案1】:我能想到的最佳解决方案:我可能会在表单中设置[value]="lz.label"
,以便您在表单中获得所需的值。
然后在更改事件中,您将传递标签并在数组中找到具有相同标签的对象。
顺便说一句,这里不需要使用 ngModel,如果你不需要它来做其他事情。所以我给你的建议是:
<form [formGroup]="form">
<select class="form-control" #t (change)="ZonaChanged(t.value)" formControlName="nama_zona">
<option *ngFor="let lz of listKota" [value]="lz.label">
lz.label
</option>
</select>
</form>
还有ZonaChanged
-方法:
ZonaChanged(label)
this.zona = this.listKota.find(x => x.label == label)
// this.zona = this.zona.value;
Demo
现在在zona
中,您拥有了可以使用的完整对象。
【讨论】:
没问题,很高兴能帮上忙! :)以上是关于如何在下拉angular2中获取标签字符串作为formControl值?的主要内容,如果未能解决你的问题,请参考以下文章
Angular 2 选择选项(下拉菜单) - 如何获取更改值以便可以在函数中使用?