Angular 2 Reactive Forms checkbox state

Question

How can I handle this situation? Displaying 3 checkboxes, every one can add/remove an indicador to the logic, how can I know if is checked? shall i create 2 methods (addIndicador & removeIndicador)?

Extra: How can i display/hide a div when the checkbox are or not checked?

<li *ngFor="let indicador of indicadores">
  <input type="checkbox" id="{{ indicador.id }}" (change) = "addIndicador(indicador.id)" />
   <label for="{{ indicador.id }}">{{ indicador.nombre }}</label>
</li>



addIndicador(indicador: number):void {
    let answers: FormArray = new FormArray([]); 
    let id = indicador;

    (<FormArray>this.customForm.controls['indicadores']).push(
        new FormGroup({
            id: new FormControl(id),
            answers: answers
        })
    )
}

Something like this? https://stackoverflow.com/a/43424244/6294072 — AT82, Jun 13 '17 at 12:03
Thats exactly what I was looking for thanks! Now i can add/remove that checkboxes. I have a question: Is the $event the right way to handle this? I recently started learning this and I want to do on the best way. And, how can i make a div to be displayed/hidden when the checkbox is checked or not? — PriNcee, Jun 13 '17 at 12:15
Are you thinking that it's not the *Angular way* using `$event`? This is absolutely the best and easiest option here, and there's nothing wrong with it, at least in my opinion :) If you want hide/show divs also based on the values, I'd suggest you add just some condition to these `divs`, whatever the condition is based on (`idicador.id` ?) these could then be toggled with the same function as with the checkboxes, that for example show the divs that are in your form array. — AT82, Jun 13 '17 at 12:25
How can I reach the `FormGroup > FormControl (id)` in my situation? because with `FormArray.controls.findIndex(x => x.value == id)` is always deleting the last option :/ — PriNcee, Jun 13 '17 at 12:49
I have to try your code to see what's going on, hooold on :) — AT82, Jun 13 '17 at 12:56

score 0 · Accepted Answer · answered Jun 13 '17 at 13:28

The link I provided in comment: Angular 2 how to get the multiple checkbox value? is close to a duplicate, but since we are dealing with formgroups inside the formarray, instead of just form controls, the deleting and adding differs somewhat.

Maybe there is a more elegant way (?), but keeping in mind that some normal array functions are not available for a FormArray, so therefore we ended up doing a simple for loop that iterates the FormArray and finds the index of the FormGroup where indicadores.id resides. And then we remove the Formgroup with that index. So something like this:

addRemoveIndicador(indicador: number, isChecked):void {
  let answers: FormArray = new FormArray([]); 
  let id = indicador;

  if(isChecked) {
    <FormArray>this.customForm.controls['indicadores'].push(
    new FormGroup({
        id: new FormControl(id),
        answers: answers
    })       
  } else {
    for(let i = 0; i<this.customForm.controls['indicadores'].length; i++) {
      if(this.customForm.controls['indicadores'].controls[i].controls.id.value == indicador) {
        this.customForm.controls['indicadores'].removeAt(i)
      }
    }
  }

And in the template we have the function addRemoveIndicador with the checkboxes:

<input type="checkbox" 
    (change) ="addRemoveIndicador(indicador.id, $event.target.checked)" />

PLUNKER

Thanks for your answer! Im getting this error: Property 'length' does not exist on type 'AbstractControl' and the same with controls and removeAt. The plnkr works as expected but my local not, you know why? — PriNcee, Jun 13 '17 at 15:07
I solved it changing the if to: this.customForm.controls['indicadores'].controls[i].value.id == indicador — PriNcee, Jun 13 '17 at 15:25
Sorry, didn't see your comment until now! Good that you got it sorted out. Strange that it was not working as in the plunker, but good that you found an alternative solution! :) Yeah, the way you did it works as well, but still strange that it didn't work the other way. Hmm. I guess it becomes an Angular mystery :D Can't think of any reason, at the moment at least, as to why it wouldn't work.... — AT82, Jun 13 '17 at 16:42
No problem!! ;) now Im looping the form this way `
` to "show/hide" the divs when checked but when I try to display the `indicador.nombre` or `indicador.id` is empty, Can I access to anything inside the form `Form Value: { "qid": "103", "indicadores": [ { "id": "1", "IndicadorNombre": "Porcentaje", "predefined": false, "answers": [] }, { "id": "2", "IndicadorNombre": "Media", "predefined": false, "answers": [] } ] }` ?? — PriNcee, Jun 14 '17 at 07:33

Angular 2 Reactive Forms checkbox state

1 Answers1