在Angular 2模型驱动表单中的下拉列表
在Angular 2模型驱动表单中的下拉列表
我有一个基于模型的表单,我想在其中添加一个包含多个选项的下拉列表。选项是从预先获取的列表中获取的,并且表单的模型被注入到组件中。表单正确加载:模型中的所有字段都被正确填充,下拉列表的选项列表也正确加载。
唯一的问题是,我无法设置列表的selected
值,它一开始就显示为空值。
在这里,我首先加载HMO列表,然后加载患者,然后才创建表单。
表单的所有值(名称、ID等)都被正确加载到表单中。
表单中的下拉列表填充正确:所有的HMO都在列表中显示。
然而,列表中的选中值丢失了,列表加载时没有初始值。
为了调试目的,我将option
标签中的布尔条件:patient.hmo.uid == hmo.uid
替换为函数调用:isSelected(hmo)
。
这个函数本质上执行相同的比较并返回其值,但是首先将其记录下来。实际上,我看到具有正确HMO的选项得到了true
值,而其他所有选项都得到了false
值,这意味着所有数据都正确加载。
另外,当我设置[selected]="true"
(始终为true)时,我确实看到了变化的影响:最后一个选项被选中(HTML中的默认选项)。
那么我错在哪里?如何正确设置选中的选项?
组件的代码(除了HMO之外的所有字段被省略):
import {Component, Input, Inject, OnInit} from "@angular/core"; import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES, Validators, FormBuilder, FormArray } from "@angular/forms"; import {Patient} from "./patient"; import {PatientsService} from "./patients.service"; import {Hmo} from "../hmos/hmo"; import {HmosService} from "../hmos/hmos.service"; import {Doctor} from "../doctors/doctor"; import {DoctorsService} from "../doctors/doctors.service"; import {Router, ActivatedRoute} from "@angular/router"; import {Subscription} from "rxjs/Rx"; import {Response} from "@angular/http"; import {JavaDate} from "./java-date"; @Component({ moduleId: module.id, selector: 'gy-patient-edit', templateUrl: 'patient-edit.component.html', directives: [REACTIVE_FORM_DIRECTIVES], }) export class PatientEditComponent implements OnInit { patientForm: FormGroup; @Input() patient: Patient; private hmos: Hmo[]; private patientUid: number; private showForm: boolean = false; constructor(@Inject(PatientsService) private patientsService: PatientsService, @Inject(HmosService) private hmosService: HmosService, @Inject(ActivatedRoute) private route: ActivatedRoute, @Inject(FormBuilder) private formBuilder: FormBuilder) { } ngOnInit(): any { this.subscription = this.route.params.subscribe( (params: any) => { this.patientUid = params['id']; //从URL中获取UID } ); this.hmosService.hmosChanged.subscribe( (hmos: Hmo[]) => { this.hmos = hmos; //获取可用的HMO } ); this.hmosService.fetchHmos(); this.patientsService.fetchPatient(this.patientUid) //获取患者 .map((response: Response) => response.json()) .subscribe((data: Patient) => { this.patient = data; this.restartForm(); //只有在从服务器接收到患者后才需要初始化表单 }); } restartForm(){ this.patientForm = this.formBuilder.group({ hmo: [this.patient.hmo]] }); this.showForm = true; } ngOnDestroy() { this.subscription.unsubscribe(); } }
HTML表单的代码:
Patient
的代码:
import {Hmo} from "../hmos/hmo"; export class Patient { constructor(public hmo: Hmo) { } }
Hmo
的代码:
export class Hmo{ constructor(public uid: number, public name: string){} }
在Angular 2中的模型驱动表单中,下拉列表的问题出现的原因是选定的选项是通过比较<option>
的值与<select>
的值来计算的。因此,要将<option>
标记为选定状态,我们需要确保包含相同值的<select>
,而这又需要在模型中正确设置相应表单控件的值。
解决方法如下所示:
restartForm(){ this.patientForm = this.formBuilder.group({ hmo: [this.patient.hmo.uid] }); this.showForm = true; }
模板代码如下:
<select formControlName="hmo" id="hmo"> <option *ngFor="let hmo of hmos" [value]="hmo.uid"> {{hmo.name}} </option> </select>