web-dev-qa-db-ja.com

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']; //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){}
}
_
htmlformsangular
15
Guy Yafe

選択されたオプションは、<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>
23
Harry Ninh