p-multiselect is not resetting when using with reactive form

[Cretesh-Anuj]

Describe the bug

P-multiselect is not going back to its default label even after resetting it when using reactive form

Environment

Latest Angular + PrimeNg, easily reproducible (see the StackBlitz link below)

Step 1 :

Step 2:

Step 3:
The checkboxes are unchecked but label is still present with those values.

Reproducer

https://stackblitz.com/edit/swzu6g?file=src%2Fapp%2Fdemo%2Fmulti-select-template-demo.ts

Angular version

17.0.8

PrimeNG version

17.3.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.9.0

Browser(s)

Chrome

Steps to reproduce the behavior

1. Select values from multiselect dropdown
2. Click on reset button
3. Checkbox is getting unchecked but it is not reflecting multiselect label (i.e. it is not going back to its default label or placeholder)

Expected behavior

1. Select values from multiselect dropdown
2. Click on reset button
3. Checkbox should be unchecked and it should be back to default label or placeholder

[chetanbavare]

this.trcPatientEngagementForm.get('selectedCountries').setValue([]);
add this line inside ResetForm() function to set the selected countries array to null after clicking reset button

[yassine-fy94]

add [showClear]="true" on your html p-multiSelect