Angular响应式表单嵌套结构中，如何获取PrimeNG下拉框指定值

我之前在处理嵌套响应式表单里的PrimeNG下拉框时也遇到过一模一样的问题！其实PrimeNG早就提供了专门的属性来控制下拉框返回的值，不用自己手动去拆解选中的对象，具体做法如下：

核心：使用optionValue属性 #

PrimeNG的p-dropdown组件有一个optionValue属性，它可以让你指定选项对象中的某个字段作为表单控件的返回值。比如你希望返回1.0，只要你的选项数据里有对应的字段（比如value），直接把这个属性指向该字段即可。

步骤示例 #

1. 组件内的表单与选项数据初始化

假设你的选项数据结构是这样的，同时初始化嵌套的响应式表单：

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

// 示例选项数据，其中value字段是你想要返回的1.0这类值
dropdownOptions = [
  { label: '数值选项1', value: 1.0 },
  { label: '数值选项2', value: 2.0 },
  { label: '数值选项3', value: 3.0 }
];

// 初始化包含嵌套组和数组的响应式表单
myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    parentGroup: this.fb.group({
      itemArray: this.fb.array([
        // 表单数组里的单个表单组
        this.fb.group({
          targetField: [null] // 用来绑定下拉框值的表单控件
        })
      ])
    })
  });
}

// 便捷获取表单数组的方法
get itemArray() {
  return this.myForm.get('parentGroup.itemArray') as FormArray;
}

2. 模板中的下拉框绑定

在模板里，除了常规的formControlName、optionLabel（控制显示的文字），一定要加上optionValue来指定返回的字段：

<form [formGroup]="myForm">
  <div formGroupName="parentGroup">
    <div formArrayName="itemArray">
      <!-- 遍历表单数组中的每个项 -->
      <div *ngFor="let item of itemArray.controls; let i = index" [formGroupName]="i">
        <p-dropdown
          [options]="dropdownOptions"
          optionLabel="label" <!-- 下拉框显示的文字 -->
          optionValue="value" <!-- 关键：指定返回的字段为value -->
          formControlName="targetField"
          placeholder="请选择数值">
        </p-dropdown>
      </div>
    </div>
  </div>
</form>

效果验证 #

这样设置后，当你选中某个选项时，targetField这个表单控件的值就会直接是对应的value字段（比如1.0），而不是整个选项对象。你可以通过this.myForm.get('parentGroup.itemArray.0.targetField')?.value来获取这个值，完全符合你的需求。

如果你的选项数据字段名不是value，只需要把optionValue改成你实际的字段名就行，比如optionValue="numValue"。

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