Angular PrimeNG：点击按钮自动选中p-dropdown的Gujarat选项

我使用以下Angular PrimeNG的p-dropdown组件代码：

<p-dropdown
  class="form-right-column mt-6"
  [options]="states"
  filterBy="name"
  [formControl]="$any(formGroup).get('state')"
  optionLabel="name"
  [editable]="true"
  (onFilter)="customFilter($event)"
  placeholder="Select State"
></p-dropdown>

同时有一个触发点击事件的按钮：

<p-button
  (click)="confirm($event)"
  icon="pi pi-check"
  label="Confirm"
></p-button>

我希望在点击该Confirm按钮时，自动选中p-dropdown中的Gujarat选项，请问如何通过TypeScript实现这一功能？

由于你的下拉框绑定到了表单控件formGroup.get('state')，核心逻辑是找到目标选项后给表单控件赋值即可，具体实现步骤如下：

1. 在states数组中定位name为Gujarat的选项
2. 在按钮的confirm点击方法中，将该选项设置为表单控件的值

TypeScript代码示例 #

假设你的states数组结构如下：

// 示例状态数组，可根据实际结构调整
states = [
  { name: 'Maharashtra', value: 'MH' },
  { name: 'Gujarat', value: 'GJ' },
  { name: 'Karnataka', value: 'KA' }
];

// 表单组定义（示例）
formGroup = new FormGroup({
  state: new FormControl(null)
});

confirm(event: Event) {
  // 查找目标选项
  const targetState = this.states.find(item => item.name === 'Gujarat');
  
  if (targetState) {
    // 给表单控件赋值，自动同步到下拉框
    this.formGroup.get('state')?.setValue(targetState);
  }
}

注意事项 #

• 如果你的states选项是value和name分离的结构，直接赋值整个选项对象即可，PrimeNG会通过optionLabel="name"自动匹配显示文本
• 必须判断targetState是否存在，避免找不到选项时出现空值错误
• 若表单控件使用了$any类型转换，确保formGroup的类型定义正确，或在代码中做适当的类型断言

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