Angular 2 模型驱动形式的下拉列表

Posted 2023-02-22

【中文标题】Angular 2 模型驱动形式的下拉列表

【英文标题】：Drop Down List in Angular 2 Model Driven Form

【发布时间】：2017-02-02 23:35:58

【问题描述】：

我有一个模型驱动表单，我想在其中添加一个包含多个选项的下拉列表。选项来自预取的列表，并且表单的模型被注入到组件中。表单已正确加载：模型中的所有字段均已正确填写，下拉列表的选项列表也已正确加载。 唯一的问题是我无法设置列表的selected 值，而且一开始它以一个空值出现。

在这里，我正在加载 HMO 列表，然后加载患者，然后才创建表单。 表单的所有值（名称、id 等，此处省略）均已正确加载到表单中。 表单中的下拉列表填写正确：所有 HMO 都在填写列表。 尽管如此，列表中的选定值仍然丢失，并且丢失的加载时没有初始值。 出于调试目的，我已将 option 标签中的布尔条件：patient.hmo.uid == hmo.uid 替换为函数调用：isSelected(hmo)。 该函数本质上进行相同的比较并返回其值，但首先记录它。实际上，我看到具有正确 hmo 的选项获得了 true 值，而所有其他选项都获得了 false 值，这意味着所有数据都已正确加载。

此外，当我设置[selected]="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']; //Getting the UID from the URL
      
    );
    this.hmosService.hmosChanged.subscribe(
      (hmos: Hmo[]) => 
        this.hmos = hmos; //Fetching available HMOs
      
    );
    this.hmosService.fetchHmos();
    this.patientsService.fetchPatient(this.patientUid) //Fetching the Patient
      .map((response: Response) => response.json())
      .subscribe((data: Patient) => 
        this.patient = data;
        this.restartForm(); //Only required so the form will ne initialized only after the patient is received from the server
      );
  

  restartForm()
    this.patientForm = this.formBuilder.group(
      hmo: [this.patient.hmo]]
    );
    this.showForm = true;
  

  ngOnDestroy() 
    this.subscription.unsubscribe();
  

HTML 表单的代码：

<div class="row" *ngIf="showForm">
  <div class="col-xs-12" *ngIf="showForm">
    <form [formGroup]="patientForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="hmo">HMO</label>
        <select formControlName="hmo" id="hmo">
          <option *ngFor="let hmo of hmos"
                  [value]="hmo.uid" [selected]="patient.hmo.uid == hmo.uid">
            hmo.name
          </option>
        </select>
    </form>
  </div>
</div>

Patient 的代码：

import Hmo from "../hmos/hmo";
export class Patient 
  constructor(public hmo: Hmo) 

  

Hmo 的代码：

export class Hmo
  constructor(public uid: number, public name: string)

【参考方案1】：

通过将<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>