Drop Down List w Angular 2 Model Driven Form

Question

Mam formę modelu, w którym chciałbym dodać rozwijaną listę zawierającą kilka opcji. Opcje pochodzą z wcześniej pobranej listy, a model formularza jest wstrzykiwany do komponentu. Formularz jest ładowany poprawnie: wszystkie pola z modelu są wypełnione poprawnie, a lista opcji dla listy rozwijanej jest również poprawnie ładowana.
Jedyny problem polega na tym, że nie mogę ustawić wartości selected na liście i pojawia się z pustą wartością na początku.

Tutaj ładuję listę HMO, następnie ładuję pacjenta, a dopiero potem tworzę formularz.
Wszystkie wartości formularza (nazwa, identyfikator itp., Które zostały tutaj pominięte) są poprawnie wczytywane do formularza.
Lista rozwijana w formularzu jest wypełniona poprawnie: Wszystkie HMO wypełniają listę.
Nadal brakuje wybranej wartości na liście, a zagubiona jest załadowana bez wartości początkowej.
Do celów debugowania zastąpiłem warunek logiczny w tagu option: patient.hmo.uid == hmo.uid jako wywołanie funkcji: isSelected(hmo).
Ta funkcja w zasadzie wykonuje to samo porównanie i zwraca jego wartość, ale najpierw ją rejestruje. Rzeczywiście widzę, że opcja z prawidłową wartością hmo ma wartość true, a wszystkie pozostałe opcje otrzymują wartości false, co oznacza, że ​​wszystkie dane są poprawnie załadowane.

Ponadto, kiedy ustawiam [selected]="true" (zawsze tak, aby była prawdziwa), widzę, że zmiana ma wpływ: wybrana jest ostatnia opcja (domyślna w HTML).

Więc gdzie ja się mylę? Jak poprawnie ustawić wybraną opcję?

kod dla komponentu (wszystkie pola z wyjątkiem HMO zostały pominięte):

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(); 
    } 

} 

Kod do formularza 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> 

kodują Patient:

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

    } 
} 

Code dla Hmo:

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

Answer 1

Wybrana opcja jest obliczana poprzez porównanie wartości <option> z wartością <select>. W związku z tym, aby zaznaczyć oznaczenie <option>, musimy upewnić się, że opakowanie <select> zawiera tę samą wartość, co z kolei wymaga poprawnej wartości odpowiedniego formantu formularza w modelu.

Twój kod może być nieco zmodyfikowany następująco:

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

i szablon:

<select formControlName="hmo" id="hmo"> 
    <option *ngFor="let hmo of hmos" 
    [value]="hmo.uid"> 
     {{hmo.name}} 
    </option> 
</select>