Angular 5响应式表单：设置下拉框空选项无效问题排查

我之前也碰到过类似的情况，咱们一步步拆解问题原因和解决办法：

最可能的核心原因：值类型不匹配 #

你执行setValue(1)能正常生效，是因为这个值和表单控件的类型是匹配的，但setValue("")无效，大概率是表单控件的类型和空字符串不兼容。比如你的Control{{prop.id}}控件可能被初始化为数字类型（比如new FormControl(null, ...)），而空字符串属于string类型，Angular响应式表单会拒绝设置类型不匹配的值，自然就不会更新视图选中默认的"Select"选项。

针对性解决方案 #

1. 改用null代替空字符串设置默认选项 #

把你的代码改成：

this.formLoad.controls['Control' + id].setValue(null);

如果控件是数字类型，null是合法的空值，Angular会正确识别并让视图自动匹配选中value=""的选项（HTML中的空值选项会和null做关联匹配）。

2. 检查表单控件的初始化配置 #

确保表单控件初始化时的空值类型和你后续要设置的保持一致：

• 如果控件用于存储字符串，初始化用空字符串：

  new FormControl('', Validators.required)
  

• 如果控件用于存储数字，初始化用null：

  new FormControl(null, Validators.required)
  

3. 排查changeDropdown事件的干扰 #

你的select绑定了(change)事件，检查changeDropdown函数里有没有对控件值做额外处理——比如强制把空值替换成其他内容，这也可能导致设置空值的操作被覆盖失效。

额外验证小提示 #

如果prop.mandatory为true，设置空值后控件会变成invalid状态，这是正常的验证行为，但不会影响视图选中默认选项。如果你的视图有基于控件状态的样式（比如ng-invalid的高亮样式），可能会让你误以为没选中，但实际上控件值已经是null，视图应该正确显示"Select"选项。

内容的提问来源于stack exchange，提问作者Eladerezador