Angular 2 和 select 占位符与 formbuilder 一起工作

Question

我的下拉列表中的占位符有问题。当我只使用 html 代码时，它工作正常。 HTML代码：

<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>

问题是，当我尝试将其放入 formbuilder 时，占位符消失了。 component.ts部分代码

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

如何让它发挥作用？

Answer 1

您的 FormGroup 中的值需要与您要默认选择的选项的值相同：

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

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

Angular 2 和 select 占位符与 formbuilder 一起工作

Angular 2 and select placeholder working with formbuilder

angular

angular-forms