Dropdown: Issue with selecting value when using reactive form

[tommskar]

Describe the bug

I have a reactive form setup and I'm trying to select a value in the dropdown using FormGroup.patchValue(...) with the object that was selected.

This works as expected for a native select setup but when using the same approach for a PrimeNG dropdown setup it fails to render the text (meaning the placeholder is still visible) and it doesn't mark the expected option as selected when clicking the dropdown afterwards. However, the reset button does get triggered.

Environment

Chrome 121.0.6167.184 on Windows 11

Reproducer

https://stackblitz.com/edit/github-sbij3t?file=src%2Fapp%2Fapp.component.ts

Angular version

17.1.3

PrimeNG version

17.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

No response

Steps to reproduce the behavior

See reproducer for a concise example.

Expected behavior

The dropdown should reflect the changes made to the form group.

[tommskar]

It seems you cannot pass the selected object to FormGroup.patchValue(...) but instead you have to pass the property defined by optionValue on the Dropdown.