Angular 2中FormBuilder结合下拉框placeholder失效问题求助

这个问题我碰到过好多次，核心原因很明确：你在FormBuilder里给town字段设置了初始值'tmp'，Angular的表单控件会优先使用这个初始值，直接覆盖了你在模板里通过selected标记的默认选项——毕竟控件现在的值是'tmp'，而你的下拉选项里根本没有对应这个值的选项，那个作为placeholder的选项自然就被“跳过”了，看起来像是消失了一样。

下面是具体的解决步骤：

1. 修正FormBuilder的初始值 #

把town的初始值改成undefined（或者null），和你模板里placeholder选项的[ngValue]保持一致，这样表单控件初始化时就会自动匹配到placeholder选项：

ngOnInit() {
  this.searchForm = this._formBuilder.group({
    'town': [undefined, Validators.required] // 换成undefined，同时添加必填验证强化校验逻辑
  });
}

2. 优化模板代码 #

模板里的value="undefined"和selected其实可以删掉，因为Angular会通过FormControl的初始值自动匹配对应的选项，留着反而容易混淆：

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

补充说明 #

• 添加Validators.required后，当用户未选择城市（控件值仍为undefined）时，表单会处于无效状态，刚好匹配你设置的required属性，确保用户必须选择一个城市才能提交表单。
• 纯HTML模式下placeholder能正常工作，是因为没有FormControl接管值的管理，浏览器会严格遵循你设置的selected属性；但Angular表单控件会完全控制下拉框的值，所以必须让控件初始值和placeholder选项的ngValue完全对应起来，才能让placeholder正常显示。

内容的提问来源于stack exchange，提问作者lampka w tubce