How to patch the value of multiselect dropdown (primeng component) in a reactive form?

Question

I am using primeng components in the template. I have the option to edit the form, which displays the existing field values. I am not able to patch the value of multiselect dropdown.

excludeDays = [      
    {label: 'Mon', value: 1},
    {label: 'Tue', value: 2},
    {label: 'Wed', value: 3},
    {label: 'Thu', value: 4},
    {label: 'Fri', value: 5},
    {label: 'Sat', value: 6},
    {label: 'Sun', value: 7},
  ]

I have my backend data coming in as a string and then I am converting it into array of number like

[1,2] or[2,3,4]

Now after I press the edit button I want the values of the dropdown to be selected as above excludeDays values are there.

<div class="col-12" style="width: auto;" >
      <p-multiSelect [options]="excludeDays" optionLabel="label" defaultLabel="Select day" formControlName="excludeDays"></p-multiSelect> 
</div>

I am using

this.form.patchValue({
... : ....
excludeDays: converted array of (excludeDays) to number array
})

This is the console output of the excludeDays array after converting it into number array

Answer 1

After getting data from the backend, create an array of objects using the original array, then set those values to the patchValue method.

const excludeDays = [1,2].map(id=>this.excludeDays.find(day=>day.value === id));

this.form.patchValue({
excludeDays: excludeDays
})

Answer 2

Prime NG multiselect ( p-multiselect ) expects the same data type for ngModel property as that of options property.

That means, if your options are an array of string (string[]) then you can have ngModel to be an array of string as well. But if your options are an array of objects , then options will have to be array of object (object must be of same type).

So for example, you have this array to bind to p-multiselect

excludeDays = [      
{label: 'Mon', value: 1},
{label: 'Tue', value: 2},
{label: 'Wed', value: 3},
{label: 'Thu', value: 4},
{label: 'Fri', value: 5},
{label: 'Sat', value: 6},
{label: 'Sun', value: 7}
]

and want to pre-select three values out of it, then you'll have to provide an array of same type for example

selectedDays = [
{label: 'Mon', value: 1},
{label: 'Tue', value: 2}
];

and your template would look like this

<p-multiSelect  [options]="excludeDays" [(ngModel)]="selectedDays"  defaultLabel="Select a day" optionLabel="label"></p-multiSelect>

Having explained that, you'll need to have the exact same array of objects in the patchValue method instead of having array of numbers.

this.form.patchValue({
... : ....
excludeDays: excludeDays //instead of array of numbers you should have same array of objects.
})

Answer 3

let datafromBackend = [1, 2];

let UpdateSelection = [];
this.excludeDays.forEach((item) => {
  if (datafromBackend.findIndex((x) => x === item.value) > -1) {
    UpdateSelection.push(item);
  }
});

this.profileForm.get('excludeDays').setValue(UpdateSelection);