Drop Down List in Angular 2 Model Driven Form
<p>I have a model driven form in which I would like to add a drop down list containing several options. The options are from a pre-fetched list, and the model of the form is injected to the component. The form is loaded correctly: All the fields from the model are filled properly, abd the list of options for the drop-down list is also loaded correctly.<br>
The only problem is that I can't set the <code>selected</code> value of the list, and it appears with an empty value at first.</p>

<p>Here, I am loading the HMOs list, then loading the patient, and only then creating the form.<br>
All the values of the form (name, id, etc.  which are omitted here) are loaded correctly into the form.<br>
The drop-down list in the form is filled correctly: All HMOs are populating the list.<br>
Still, the selected value in the list is missing, and the lost is loaded with no initial value.<br>
For debugging purposes, I have replaced the boolean condition in the <code>option</code> tag: <code>patient.hmo.uid == hmo.uid</code> to a function call: <code>isSelected(hmo)</code>.<br>
This function essentially does the same comparison and returns its value, but first logs it. Indeed I see that the option with the correct hmo gets a <code>true</code> value and all other options get <code>false</code> values, meaning all data is loaded correctly.</p>

<p>Also, when I set the <code>[selected]="true"</code> (always to be true), I do see the change affects: The last option is selected (the default in HTML).</p>

<p><strong>So where am I wrong? How should I set the selected option correctly?</strong> </p>

<p>Code for the component (all fields except HMO are omitted):</p>

<pre><code>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) =&gt; {
        this.patientUid = params['id']; //Getting the UID from the URL
      }
    );
    this.hmosService.hmosChanged.subscribe(
      (hmos: Hmo[]) =&gt; {
        this.hmos = hmos; //Fetching available HMOs
      }
    );
    this.hmosService.fetchHmos();
    this.patientsService.fetchPatient(this.patientUid) //Fetching the Patient
      .map((response: Response) =&gt; response.json())
      .subscribe((data: Patient) =&gt; {
        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();
  }

}
</code></pre>

<p>Code for the HTML form:</p>

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

<p>Code for <code>Patient</code>:</p>

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

  }
}
</code></pre>

<p>Code for <code>Hmo</code>:</p>

<pre><code>export class Hmo{
  constructor(public uid: number, public name: string){}
}
</code></pre>