how to set default select value with angular2 reactive forms?

Question

I have this reactive form:

<form [formGroup]="myForm" novalidate>
  <div *ngIf="myForm.get('id').value === 'Person'">
   <div formGroupName="person">
      <select class="form-control" formControlName="name"> 
        <option selected="selected">XX</option>  //Cannot make this work      
        <option *ngFor="let n of names" [value]="n">{{n}}</option>
      </select>
    <label>Select a name</label>
   </div>
  </div>
    // etc
</form>

I cannot set a default selected value to my select tag, why it doesnt work?

Answer 1

You can set value as empty:

<option value="">XX</option>

and when building your form, just set default value to empty:

name: ['']

Demo

Answer 2

The way to select a value by default is in the component:

formControl: FormControl = new FormControl('yourValue');

You can also patch a value:

formControl.patchValue('anotherValue);