Drop Down List In Angular 2 Model Driven Form

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

Solution 1:

The selected option is calculated by comparing the <option>'s value with <select>'s value. In light of that, to mark an <option> as selected, we need to make sure the wrapping <select> is containing the same value, which in turn requires the correct value of the corresponding form control in your model.

Your code can be slightly modified as follow:

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

And Template:

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