Angular 2和选择与Formbuilder一起使用的占位符

Question

I have problem with placeholder in my drop-down list. When I'm using only html code, it works correct. HTML code:

<select  
    class="form-control"
    #selectedItem
    required
    formControlName="town"
>
    <option [ngValue]="undefined" value="undefined" disabled selected>Wybierz miasto</option>
    <option class="city-option">Warszawa</option>
    <option class="city-option">Kraków</option>
    <option class="city-option">Wrocław</option>
</select>

The problem is, when I'm trying to put it into formbuilder, the placeholder is disapear. Part of component.ts code

ngOnInit() { 
 this.searchForm = this._formBuilder.group({
  'town': ['tmp']
  });
}

How to make it work?

Answer 1

The value in your FormGroup needs to be the same as the value of the option you want to be selected by default:

ngOnInit() { 
  this.searchForm = this._formBuilder.group({
    'town': null
});

<option [ngValue]="null" disabled selected>Wybierz miasto</option>