p-multiSelect onchange evita agregar elementos con el mismo índice

Tengo una opción de selección múltiple con 6 opciones de una matriz. Una de las opciones es un poco diferente a las demás (permite agregar un comentario y las demás no). Cuando selecciono esta opción y uno de los campos (x, el comentario), después de eliminarlo y seleccionarlo nuevamente, el campo estará vacío (digamos que en el primer caso agrego un comentario y en el segundo caso no), ¡así que la selección múltiple lo agregará dos veces! Pero quiero 1 valor para cada índice (sin importar los otros campos). ¿Cómo debo hacerlo? En otro lugar es diferente al obtener los valores seleccionados del servidor, cuando debería estar seleccionado después de que el usuario lo haya elegido, parece que no lo eligió.

<p-multiselect *ngif="_decision.decisionStatusId == eDecisionType.Reject || _decision.decisionStatusId == eDecisionType.ReturnedToUser" [required]="formGroup.hasError('remark-reasons-required')" [options]="reasons" defaultlabel="" formcontrolname="remarks" [(ngmodel)]="selectedReasons" optionlabel="hebName" [ngclass]="_decision.decisionStatusId == eDecisionType.ReturnedToUser || _decision.decisionStatusId == eDecisionType.Reject ? '' : 'display-none'" selecteditemslabel="{0}" (onchange)="onChangeReasonsValue($event)"></p-multiselect>

.ts

onChangeReasonsValue(event: { value: ReviewDecisionReasonModel[] }): void { this.selectedReasons = event.value; this._decision.reasons = event.value; this.formGroup.markAsDirty(); this.formGroup.markAsTouched(); this.formGroup.updateValueAndValidity(); }

davy.ai

July 26, 2023 at 11:06 am

Para asegurarte de que cada índice en la selección múltiple solo tenga un valor, independientemente del campo de comentario u otras entradas, puedes usar el evento ngModelChange para modificar los valores seleccionados en el mismo índice.

Aquí tienes un ejemplo de función que puedes usar para manejar el evento ngModelChange:

onMultiSelectChange(event) {
  const selectedValues = event.value;
  const result = [];

  selectedValues.forEach(option => {
    const existingIndex = result.findIndex(r => r.id === option.id);

    if (existingIndex >= 0) {
      // actualizar el campo de comentario
      result[existingIndex].remark = option.remark;
    } else {
      // añadir la nueva opción
      result.push(option);
    }
  });

  this.selectedReasons = result;
}

En esta función, primero obtenemos los nuevos valores seleccionados y creamos una nueva matriz llamada result para contener los valores únicos. Luego recorremos cada opción seleccionada y comprobamos si ya existe en la matriz result.

Si existe, actualizamos el campo remark de la opción existente en la matriz. Si no existe, añadimos la nueva opción a la matriz result.

Finalmente, establecemos la matriz selectedReasons en la matriz result, lo que garantizará que cada índice solo tenga un valor.

En cuanto al problema de obtener los valores seleccionados del servidor, es difícil decirlo sin ver más de tu código. Un posible problema podría ser que el servidor no recibe los valores actualizados porque el grupo de formulario no se marca correctamente como modificado y actualizado. Asegúrate de llamar a las funciones formGroup.markAsDirty() y formGroup.updateValueAndValidity() en los lugares adecuados.

Answer

davy.ai

July 26, 2023 at 11:06 am
Para asegurarte de que cada índice en la selección múltiple solo tenga un valor, independientemente del campo de comentario u otras entradas, puedes usar el evento ngModelChange para modificar los valores seleccionados en el mismo índice.

Aquí tienes un ejemplo de función que puedes usar para manejar el evento ngModelChange:
```
onMultiSelectChange(event) {
  const selectedValues = event.value;
  const result = [];

  selectedValues.forEach(option => {
    const existingIndex = result.findIndex(r => r.id === option.id);

    if (existingIndex >= 0) {
      // actualizar el campo de comentario
      result[existingIndex].remark = option.remark;
    } else {
      // añadir la nueva opción
      result.push(option);
    }
  });

  this.selectedReasons = result;
}
```
En esta función, primero obtenemos los nuevos valores seleccionados y creamos una nueva matriz llamada result para contener los valores únicos. Luego recorremos cada opción seleccionada y comprobamos si ya existe en la matriz result.

Si existe, actualizamos el campo remark de la opción existente en la matriz. Si no existe, añadimos la nueva opción a la matriz result.

Finalmente, establecemos la matriz selectedReasons en la matriz result, lo que garantizará que cada índice solo tenga un valor.

En cuanto al problema de obtener los valores seleccionados del servidor, es difícil decirlo sin ver más de tu código. Un posible problema podría ser que el servidor no recibe los valores actualizados porque el grupo de formulario no se marca correctamente como modificado y actualizado. Asegúrate de llamar a las funciones formGroup.markAsDirty() y formGroup.updateValueAndValidity() en los lugares adecuados.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

p-multiSelect onchange evita agregar elementos con el mismo índice

Answer

davy.ai