Angular FormGroup调用setValue方法无法更新sample表单控件值问题

常见失效原因 #

• 第三方bb-select2组件的选项是异步加载的：调用setValue时，samples$ | async对应的下拉选项还未从接口返回/渲染完成，组件无法根据传入的uuid匹配到对应的展示文本，因此显示为空
• 值格式不匹配：模板中(select)="form_sample.get('sample').setValue($event)"的逻辑，会将选中的完整sample对象（包含uuid、name属性）存入表单控件，如果你存在runCreated.sample中的只有uuid字符串，二者格式不一致会导致组件无法识别选中项
• 赋值时机过早：赋值操作执行时form_sample表单尚未完成初始化，sample控件不存在，赋值无效

修复方案 #

方案1：等选项加载完成后再赋值 #

在数据源的异步流中加tap操作符，等选项全部加载完成后再执行回显逻辑，同时匹配对应格式的值：

// 原获取samples的异步逻辑修改如下
this.samples$ = this.你的服务接口.getSampleList().pipe(
  tap(sampleList => {
    if (this.runCreated?.sample) {
      // 如果表单控件存的是完整对象，先从返回的列表里匹配对应uuid的对象
      const matchedOption = sampleList.find(item => item.uuid === this.runCreated.sample);
      matchedOption && this.form_sample.get('sample').setValue(matchedOption);
      // 如果确认表单控件存的就是uuid字符串，直接赋值即可，不需要上面的匹配逻辑
      // this.form_sample.get('sample').setValue(this.runCreated.sample);
    }
  })
);

方案2：确认赋值时机和参数配置 #

• 确保赋值操作在表单初始化完成之后执行，不要放在FormGroup实例化之前的生命周期钩子中
• 赋值时可补充配置触发变更检测，强制组件刷新：

if (this.runCreated?.sample) {
  this.form_sample.get('sample').setValue(this.runCreated.sample, {
    emitEvent: true,
    onlySelf: false
  });
  this.form_sample.get('sample').updateValueAndValidity();
}

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