0
824
VisualizaçõesHow to patch the value of multiselect dropdown (primeng component) in a reactive form?
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
3 Respostas
Responde à pergunta0
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
})
0
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.
})
0
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);