Angular中PrimeNG下拉框如何默认显示空占位符而非选中首项

解决方案 #

PrimeNG Dropdown组件的autoDisplayFirst属性默认值为true，会在表单控件无初始值时自动选中下拉列表的第一个选项，这是你遇到问题的根因。按以下步骤修改即可实现需求：

1. 给p-dropdown组件添加两个属性：
   • 新增placeholder="请选择职位"设置占位提示文本
   • 新增[autoDisplayFirst]="false"关闭自动选中第一个选项的默认行为

修改后的下拉框代码如下：

<div [formGroup]="form">
  <p-dropdown
    [options]="positions"
    formControlName="position"
    optionValue="id"
    optionLabel="title"
    placeholder="请选择职位"
    [autoDisplayFirst]="false"
  >
  </p-dropdown>
</div>

2. （可选）建议显式初始化表单控件值为null，避免边界场景异常：

form: FormGroup = new FormGroup({
    position: new FormControl(null),
});

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