PrimeNG p-dropdown结合Angular响应式表单无法正确绑定预选值问题

你的代码存在两个核心错误，直接导致下拉框无法匹配预选值：

• 表单控件绑定与optionValue配置完全不匹配
  你给p-dropdown设置了optionValue="languageID"，这个配置的作用是：下拉框选中后，会把选项对象的languageID字段值（比如语言的数字ID、编码字符串）写入绑定的表单控件；组件做预选匹配时，也是拿绑定控件存储的值，和每个选项的languageID做全等比对。
  但你当前写的是formControlName="name"，绑定的是存储语言名称（比如"英语""希腊语"）的控件，值的类型、内容都和languageID无法对应，组件找不到匹配项就会默认选中列表第一个选项。
• 表单结构存在冗余和不规范问题
  你在循环中给每个单独的表单项套了独立的<form>标签，同时每个语言FormGroup冗余存储了多个和下拉绑定无关的字段，很容易引发值同步异常、表单事件冒泡的问题。

根据业务需求二选一即可，第一种更适配常规表单提交流程：

方案1：表单存储语言ID（适配现有optionValue配置，推荐） #

1. 调整表单创建逻辑，只保留和下拉值对应的控件：

createLanguagesEditForm(form: FormGroup, language: LanguageModel): FormGroup {
  const languagesArray: FormArray = <FormArray>form.get('languages');
  // 只存储选中的语言ID即可，名称、图标等展示字段可以从全量语言选项中匹配获取
  const languagesFormGroup: FormGroup = this.formBuilder.group({
    languageID: [language.languageID] // 用数组语法声明控件初始值更符合响应式表单规范
  });
  languagesArray.push(languagesFormGroup); // 直接push即可，无需手动计算数组长度再insert
  return languagesFormGroup;
}

2. 调整模板的下拉绑定，修正formControlName的指向，移除多余的嵌套form标签：

<div class="display-block" *ngFor="let languagesFormGroup of languagesFormGroups; let i = index">
  <div class="form-item" [formGroup]="languagesFormGroup">
    <label class="form-label">Language {{ i + 1 }}</label>
    <p-dropdown 
      [styleClass]="'form-control'"
      optionValue="languageID"
      formControlName="languageID" <!-- 绑定到存语言ID的控件 -->
      [options]="languages"
      optionLabel="name"
      appendTo="body">
    </p-dropdown>
  </div>
</div>

这种写法下已经指定optionValue为languageID，不需要额外配置dataKey，组件会自动完成ID值和选项的匹配。

方案2：表单存储完整语言对象（无需optionValue配置） #

如果你需要在表单中直接拿到包含id、名称、图标在内的完整语言对象，可以删掉optionValue配置，靠dataKey完成对象匹配：

1. 调整表单创建逻辑，初始值直接传入完整语言对象：

const languagesFormGroup: FormGroup = this.formBuilder.group({
  selectedLanguage: [language] // 直接存储完整语言对象作为初始值
});

2. 模板调整如下：

<p-dropdown 
  [styleClass]="'form-control'"
  formControlName="selectedLanguage"
  [options]="languages"
  optionLabel="name"
  dataKey="languageID" <!-- 告诉组件用languageID字段比对对象是否匹配，解决对象引用不一致的问题 -->
  appendTo="body">
</p-dropdown>

注意这种写法不能加optionValue属性，否则组件只会存储ID字段，不会返回完整对象。

内容的提问来源于stack exchange，提问作者Katia S.