Home / Questions / 183828
Accepted
Manolait
Asked: 2020-07-26 03:12:54 +0800 CST 2020-07-26 03:12:54 +0800 CST

CheckBox Angular 4 ngfor select problem

  • 772

I'm designing a Modal with bootstrap and inside it I have a list of checkBoxes that are loaded by going through an NGFOR.

The problem is the following: When selecting one of those elements, all the checkboxes are selected, also I am not very clear how to receive information from the selection checkboxes in the component.ts

How can I select only the values ​​I want? and also send the information to my component?

This is my code:

<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

Hello,

the information that I am painting in the ngfor is the following:

["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"]

I need to be able to select any of those names and send that name in an array to my component and then pass it to the service.

In the ts I have a simple method to show me the information that the modal has, but I only get back a true

public guardar(){
      console.log('formulario posteado: ' + this.checkbox);
    }
angular

2 Answers

  1. Best Answer

    My idea to solve the problems:

    Create in the component a structure with the fields of the checkboxes:

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

    So you would have an object with attributes called the same as each checkbox initialized to false.

    And then you do something like:

    <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>
    • 0

  2. TL;DR: You are linking miDataInteriorto all checkboxes

    To solve it there are an infinity of possible solutions. What you have to understand is that when you do [(ngModel)]="miDataInterior"each checkbox, you are binding that variable to all of them. If miDataInteriorit changes, all of them will.

    A simple solution is not to use binding, but rather DOM events. When a user changes the value of the checkbox, add or remove that element to an array that will be the result. This is achieved with the event (change)and check if the target.checkedevent is active:

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

    And in the component:

      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);
  }

    This way you can use arrays of strings or any data type. You can find the working solution in this Stackblitz . There you can see that it also works with arrays of objects.

    Sure you can find other solutions, but you must understand that each checkboxhas to have its own variable separately.

    • 0