3

Estoy diseñando un Modal con boostrap y dentro de el tengo una lista de checkBox que se carga recorriendo un NGFOR.

El problema es el siguiente: A la hora de seleccionar uno de esos elementos se seleccionan todos los checkbox, ademas no tengo muy claro como recibir en informacion de los checkbox selecciones en el component.ts

Como puedo hacer para seleccionar solo los valores que quiera? y ademas enviar la información a mi componente?

Este es mi código:

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-lg-6 col-6" *ngFor="let data of sensor">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="data.name" name= "miDataInterior" [(ngModel)]="miDataInterior">
        <label class="form-check-label" for="inlineCheckbox1">{{data.name}}</label>
      </div>
    </div>
  </div>

</div>

Img CheckBox

EDIT01

Hola,

la información que estoy pintando en el ngfor es la siguiente:

["var_TempExt","var_HumRExt","var_HumRInt","var_Humedad_Sust1","var_Humedad_Sust2","var_PotActInv","var_PotActBio","var_ContadorRiego","var_RadiacionGlobalInt","var_RadiacionPARInt","var_CO2InvVaisala","var_TempInt","var_RadiacionExt","var_CO2Exterior","var_VVExt","var_DVExt","var_Lluvia","act_AbrirVentanaCen","act_AbrirVentanaLatNS","act_Aerotermo","act_BombaCalefaccion","act_Deshumificacion","act_Humidification","act_LuzArtificial","act_ValvulaTresVias"]

Necesito poder seleccionar cualquiera de esos nombres y enviar ese nombre en un array a mi componente para luego pasarlos al servicio.

En el ts tengo un método simple para mostrarme la información que tiene el modal, pero solo recupero un true

public guardar(){
      console.log('formulario posteado: ' + this.checkbox);
    } 
2
  • coloca el archivo typescript o mas precisamente la lista sensor para poder ayudarte. Commented el 25 jul. 2018 a las 12:19
  • Hola, acabo de editar el Post por si queda mas claro.
    – Manolait
    Commented el 25 jul. 2018 a las 12:42

2 respuestas 2

0

Mi idea para resolver los problemas:

Crear en el componente una estructura con los campos de los checkboxes:

//asumo que sensor es el array ["var_TempExt", "var_HumRExt", "var_HumRInt", ... ]
checkboxes= {};
sensor.forEach(nombre => checkboxes[nombre]=false);

Con lo que tendrías un objeto con atributos llamados igual que cada checkbox inicializados a false.

Y luego haces algo como:

<div class="col-md-6 col-lg-6 col-6" *ngFor="let data of sensor; let i= index">
    <input class="form-check-input" type="checkbox" name= "miDataInterior" 
        [(ngModel)]="checkboxes[data.name]" id="{{'inlineCheckbox' + i}}">

    <label class="form-check-label" for="{{'inlineCheckbox' + i}}">{{data.name}}</label>
</div>
14
  • Hola, antes de nada gracias por la ayuda. He probado añadiendo los corchetes y sigue pasando lo mismo :S
    – Manolait
    Commented el 25 jul. 2018 a las 11:39
  • los valores que yo pinto son los siguientes y no veo problema: sensores completos: ["var_TempExt","var_HumRExt","var_HumRInt","var_Humedad_Sust1","var_Humedad_Sust2","var_PotActInv","var_PotActBio","var_ContadorRiego","var_RadiacionGlobalInt","var_RadiacionPARInt","var_CO2InvVaisala","var_TempInt","var_RadiacionExt","var_CO2Exterior","var_VVExt","var_DVExt","var_Lluvia","act_AbrirVentanaCen","act_AbrirVentanaLatNS","act_Aerotermo","act_BombaCalefaccion","act_Deshumificacion","act_Humidification","act_LuzArtificial","act_ValvulaTresVias"]
    – Manolait
    Commented el 25 jul. 2018 a las 11:50
  • lo curioso es que si elimino el [(ngModel)]="miDataInterior" si puedo seleccionar uno por uno los nombres, pero no se como enviarlos al componente
    – Manolait
    Commented el 25 jul. 2018 a las 11:55
  • 1
    Quita la etiqueta id y debería funcionar Commented el 25 jul. 2018 a las 12:42
  • @JackNavaRow Bien visto! No sé cómo no me he dado cuenta Commented el 25 jul. 2018 a las 13:00
0

TL;DR: Estas enlazando miDataInterior a todos los checkbox

Para resolverlo hay una infinidad de soluciones posibles. Lo que tienes que entender es que cuando haces [(ngModel)]="miDataInterior" en cada checkbox, estas enlazando esa variable a todos ellos. Si miDataInterior cambia, lo haran todos ellos.

Una solución sencilla es no usar el enlace, sino los eventos del DOM. Cuando un usuario cambie el valor del checkbox, agregar o quitar ese elemento a un arreglo que será el resultado. Esto se logra con el evento (change) y revisar si el target.checked del evento está activo:

<input class="form-check-input" type="checkbox" 
  name= "miDataInterior" (change)="$event.target.checked ? agregar(data) : quitar(data)">

Y en el componente:

  agregar(data: string) { // Agregamos el elemento
    this.miDataInterior.push(data);
  }

  quitar(data) { // Filtramos el elemento para que quede fuera
    this.miDataInterior = this.miDataInterior.filter(s => s !== data);
  }

De esta manera podés usar arreglos de strings o de cualquier tipo de datos. Podés encontrar la solución funcionando en este Stackblitz. Allí podés ver que también funciona con arreglos de objetos.

Seguro podés encontrar otras soluciones, pero debés entender que cada checkbox tiene que tener su variable por separado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.