Setting selected option of select control in an Angular 2 model-driven form : <p>I have researched many similar existing answers on SO and elsewhere, but just can't find the solution to this.</p>

<p>I'm using the model-driven approach in Angular 2 to build my form, which is both an add and edit form. When in edit mode, the values are populated with data retrieved from a service: this aspect is all fine because the simple text inputs all bind correctly.</p>

<p>One of the properties is 'Country' and this is an object as follows:</p>

<pre><code>    export class Country {id: number; name: string;}
</code></pre>

<p>I want to bind this to a select control which will have the list of countries available, and the one from the model populated when the form loads. I want the value of the binding to be the country object, not just the id.</p>

<p>Here's the html of the select control:</p>

<pre><code>    &lt;select class="form-control" id="country" formControlName="country"&gt;
          &lt;option value="default"&gt;--Select a country--&lt;/option&gt;
          &lt;option *ngFor="let c of countries" [value]="c"&gt;{{c.name}}      &lt;/option&gt;
&lt;/select&gt; 
</code></pre>

<p>And here is where i try to to populate the value from the component class:</p>

<pre><code>    (&lt;FormControl&gt;this.personForm.controls['country'])
 .setValue(this.person.country, { onlySelf: true });
</code></pre>

<p>But there is no selected option when the page loads, even though the console confirms that this.person.country exists and is populated with the correct object.</p>

<p>I can get it working with ids: changing to [value]="c.id" in the view and appending .id in the class, and then it works in that the right option is selected. The problem is that the select no longer emits an object for the country property, just the id. I tried changing [value] to [ngValue] and get the same result. I even added [ngModel]="country" to the select element and that didn't help either.</p>

<p>I'd be grateful for any help.</p>
