0
823
Vistas¿Cómo parchear el valor del menú desplegable de selección múltiple (componente primeng) en una forma reactiva?
Estoy usando componentes primeng en la plantilla. Tengo la opción de editar el formulario, que muestra los valores de campo existentes. No puedo parchear el valor del menú desplegable de selección múltiple.
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}, ]Tengo mis datos de backend entrando como una cadena y luego los estoy convirtiendo en una matriz de números como
[1,2] or[2,3,4]Ahora, después de presionar el botón de edición, quiero que los valores del menú desplegable se seleccionen como los valores de los días de exclusión anteriores están allí.
<div class="col-12" style="width: auto;" > <p-multiSelect [options]="excludeDays" optionLabel="label" defaultLabel="Select day" formControlName="excludeDays"></p-multiSelect> </div>estoy usando
this.form.patchValue({ ... : .... excludeDays: converted array of (excludeDays) to number array }) Esta es la salida de la consola de la matriz includeDays después de convertirla en una matriz de números 
3 Respuestas
Responde la pregunta0
Después de obtener datos del backend, cree una matriz de objetos utilizando la matriz original y luego establezca esos valores en el método patchValue.
const excludeDays = [1,2].map(id=>this.excludeDays.find(day=>day.value === id)); this.form.patchValue({ excludeDays: excludeDays })0
Prime NG multiselect ( p-multiselect ) espera el mismo tipo de datos para la propiedad ngModel que para la propiedad options .
Eso significa que, si sus opciones son una matriz de cadenas (cadena []), entonces puede hacer que ngModel sea una matriz de cadenas también. Pero si sus opciones son una matriz de objetos , entonces las opciones tendrán que ser una matriz de objetos (el objeto debe ser del mismo tipo).
Entonces, por ejemplo, tiene esta matriz para vincular a 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} ]y desea preseleccionar tres valores, entonces deberá proporcionar una matriz del mismo tipo, por ejemplo
selectedDays = [ {label: 'Mon', value: 1}, {label: 'Tue', value: 2} ];y tu plantilla se vería así
<p-multiSelect [options]="excludeDays" [(ngModel)]="selectedDays" defaultLabel="Select a day" optionLabel="label"></p-multiSelect>Habiendo explicado eso, deberá tener exactamente la misma matriz de objetos en el método patchValue en lugar de tener una matriz de números.
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);