如何手动设置p-autocomplete的[field]属性并自定义表单存储值？

安全阿岳

2026-7-19

解决方法

模板配置

PrimeNG的p-autocomplete支持直接通过嵌套属性路径指定显示字段，不需要自定义函数。用optionLabel（新版推荐，旧版可用field）直接设置为"name.lang.field1"即可：

<p-autoComplete 
  [suggestions]="complexObjects" 
  [formControl]="inputFormControl" 
  [dropdown]="true" 
  [multiple]="multiple" 
  optionLabel="name.lang.field1"
  (onSelect)="onSelect($event)"
  (onUnselect)="onUnselect($event)"
></p-autoComplete>

组件逻辑处理

要避免formControl存储整个对象，需要手动维护选中值数组并同步到表单控件：

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

export class YourComponent {
  complexObjects = [
    {
      "name": {
        "value": 4,
        "lang": {
          "language": { "value": "en" },
          "field1": "Pakistan",
          "field2": "Pakistan",
          "field3": "Pakistan"
        }
      }
    },
    {
      "name": {
        "value": 5,
        "lang": {
          "language": { "value": "en" },
          "field1": "India",
          "field2": "India",
          "field3": "India"
        }
      }
    }
  ];
  inputFormControl = new FormControl([]);
  selectedValues: number[] = [];
  multiple = true;

  onSelect(event: any) {
    // 防止重复添加选中值
    if (!this.selectedValues.includes(event.name.value)) {
      this.selectedValues.push(event.name.value);
      this.inputFormControl.setValue([...this.selectedValues]);
    }
  }

  onUnselect(event: any) {
    this.selectedValues = this.selectedValues.filter(val => val !== event.name.value);
    this.inputFormControl.setValue([...this.selectedValues]);
  }
}

核心要点

optionLabel支持点分隔的嵌套属性路径，组件会自动读取每个complexObjects元素的name.lang.field1作为显示文本，不需要编写getField()这类函数。
多选模式下，组件默认会把整个选中对象存入表单控件，因此必须通过onSelect和onUnselect事件手动提取你需要的name.value，维护成数组后同步给inputFormControl。
若为单选模式，只需在onSelect中执行this.inputFormControl.setValue(event.name.value)即可。