I am using PrimeNG to create a multi-select dropdown in an Angular application as in the snippet below: The problem I seem to be having, is the groups all have same names, and selecting one, selects them all.
<p-multiSelect [options]="groupedInteractions" [group]="true" [(ngModel)]="selectedInteractions" defaultLabel="Select" formControlName="interactions">
</p-multiSelect>Json is similar to this:
{
"First-Group": [
"Self-service",
"Non self-service"
],
"Second-Group": [
"Self-service",
"Non self-service"
]
}
If I select "Self Service" From First group. Both "Self Services" are selected.
You must use a unique attribute in the object that identifies each element, and use the optionValue and optionLabel properties: { "First-Group": [ "Self-service", "Non self-service", 1 ], "Second-Group": [ "Self-service", "Non self-service", 2 ] }