如何取消PrimeNg 15中p-dropdown组件的默认预选中状态

问题原因 #

PrimeNG 15的p-dropdown组件在绑定对象类型的选项数组时，默认会自动选中第一个选项，即便你将表单控件的值设为null——这是因为组件默认不允许空选中状态，会自动 fallback 到第一项。

解决方案 #

方案1：添加nullable属性（最简便）

直接在p-dropdown标签中添加[nullable]="true"，开启空值支持，这样控件值为null时，下拉框会显示占位符（可通过placeholder自定义），不会自动选中第一项：

<form [formGroup]="myReactiveForm">
  <b>Dropdown:</b>
  <p-dropdown
    [options]="colors"
    optionLabel="name"
    formControlName="color"
    [nullable]="true"
    placeholder="请选择颜色" <!-- 可选：自定义占位文本 -->
  ></p-dropdown>
</form>

方案2：添加空选项

在颜色数组开头插入一个空选项，清空表单时将控件值设为这个空对象，下拉框会显示空选项而非默认选中第一项：

// TS代码修改
colors = [
    { name: '', code: '' }, // 新增空选项
    { name: 'black', code: 'blk' },
    // 其他颜色选项...
];

clearForm() {
    this.myReactiveForm.controls.color.setValue(this.colors[0]);
}

方案3：确保FormControl初始化时设为null

初始化FormControl时直接指定null作为初始值，配合nullable属性使用效果更稳定：

constructor() {
    this.myReactiveForm = new FormGroup({
      // 其他控件...
      color: new FormControl(null), // 初始化时设为null
      // 其他控件...
    });
}

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