在Angular 2模型驱动表单中的下拉列表

38 浏览
0 Comments

在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){}
}

0
0 Comments

在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>

0