Angular中使用setValue()为select下拉框设置值不生效的问题咨询

你写的代码里有两个会直接导致设值不生效的问题：

• 响应式表单的所有控件状态完全由绑定的FormControl实例管控，你在<option>标签上手动加的[selected]="true"属于无效的干扰代码——Angular在处理带formControlName的select时，会完全忽略option上写的手动选中标记，甚至会在初次渲染时把选中态锁在写了selected的选项上，导致后续FormControl更新的值根本没法同步到界面。
• 如果你在初始化FormGroup的时候没有把StatusTask控件正确挂载到表单实例上，或者取控件的路径写错，那你调用的setValue压根没作用到绑定在模板上的那个真实控件上，自然看不到生效效果。

修正后的实现步骤 #

1. 清理模板里的冗余选中标记 #

把option上硬写的[selected]="true"删掉，所有选中逻辑完全交给FormControl控制，修正后的select代码：

<select
     class="form-control form-control-sm"
     id="StatusTask"
     formControlName="StatusTask"
     name="StatusTask"
>
    <option value="new">New</option>
    <option value="inprocess">In process</option>
    <option value="solved">Solved</option>
    <option value="end">end</option>
</select>

2. 正确初始化表单结构 #

在组件类里初始化FormGroup时，必须显式声明StatusTask控件，不能漏配，不然控件实例压根不存在：

import { FormGroup, FormControl } from '@angular/forms';

// 组件内部的表单初始化
formEditTask = new FormGroup({
  // 给StatusTask配初始值，哪怕是空字符串也要声明
  StatusTask: new FormControl('')
});

3. 调整设值逻辑 #

你原本写的setValue方法本身逻辑是对的，只要补上两个容易踩的细节：

• 取控件的时候做好空值保护，如果StatusTask是嵌套在子表单组里的，要写全路径。比如子表单组叫taskInfo，那取控件的路径就得是'taskInfo.StatusTask'，不能直接写'StatusTask'去拿，不然会拿到null值。
• 确保传入的设值和option的value完全匹配：Angular的select选中判断是严格相等的，大小写、空格差一点都匹配不上，比如传'New'（大写N）、' new '（前后带空格）都没法选中对应选项。
  修正后的设值代码：

const MyInfo = 'new';
// 空值保护，确保控件存在再执行设值
this.formEditTask.get('StatusTask')?.setValue(MyInfo);

快速定位问题的小技巧 #

设值执行完之后，直接在控制台打印控件的当前值做判断：

• 如果打印出来的控件值和你设置的目标值完全一致，但界面没选中对应选项，不用多想，就是之前留的[selected]="true"在干扰，删掉那行代码立刻就好。
• 如果打印出来的控件值是null，说明你取控件的路径写错了，压根没拿到和模板绑定的那个真实控件，把路径改对就行。

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