How to use multiple Checkboxes with formControlName

Ionic Framework ionic-v3
1

Hello,

I’m unable to use multiple checkboxes with formControlName. Here is the code sample -

<div *ngFor="let option of question.questionOptions">
   <ion-item>
	<ion-label>{{option.optionText}}</ion-label>
	<ion-checkbox formControlName="option.answerId" (click)="changeRadioStatus(option, question)"></ion-checkbox>
  </ion-item>
</div>

Here is the error i’m getting

EXCEPTION: Cannot find control with name: ‘option.answerId’

Checkboxes are dynamic and i can not use even [(ngModel)] within formGroup based form.

2

Hellooooo,

I’m trying to achieve something like is -

var formData = {};
      _properties.forEach(element => {

          var key = element.questionId;
          
          formData[key] = [''];
          //here you can write logic if you want fields to be required
          if (true) {
              //CHECK IF QUESTION IS CHECKBOXES THEN GO AHEAD WITH SUB ARRAY
              if(element.question_input_type == 'CHECKBOX'){
                let allOptions = element.questionOptions;

                formData[key] = [];
                console.log(formData[key]);
                allOptions.forEach(allOptions => {
                  //console.log(allOptions);
                  let keyOptions = allOptions.answerId;
                  formData[key][keyOptions] = [''];

                  if(true){
                    formData[key][keyOptions].push(Validators.required); 
                  }
                })
                
                let newFormData = this.formBuilder.group(formData[key]);
                formData[key].push(newFormData);
              }
              else{
                 formData[key].push(Validators.required); 
              }   
          }
      });

      this.formData = this.formBuilder.group(formData);

Here is the error which i’m getting

EXCEPTION: Cannot find control with path: ‘1ed50372-12c0-1f78-7c72-5916e4ca8495 → 65afb26a-c98b-1a39-657c-5916e54c4d7f’

3

you want to eval the expression of “option.anserId”

so try something like that:

formControlName="{{option.answerId}}"

[formControlName]="option.answerId"
2 Likes
4

No it’s not working even i used forGroupNumber above this formControlName, still it’s giving me the same error.

5

Right Way to do this:

<div *ngFor="let option of question.questionOptions">
<ion-item-group [formControl]="checkboxes">
   <ion-item>
	<ion-label>{{option.optionText}}</ion-label>
	<ion-checkbox (click)="changeRadioStatus(option, question)"></ion-checkbox>
  </ion-item>
</ion-item-group>
</div>

You need to set checkboxes form controller in ts file.

6

ahhh i do not recognized that these are checkboxes

i only want to hint out, that he needs to wrap the formControl in brackets to eval his expression.

7

Yeah but he cant use dynamic form controller name, right?

8

Sure, you can [property]=“5+1” should evaluate the expression so property=“6” is the result

Without the brackets you simply have the string “5+1” on it.
And if you pass there a variable, which holds the name, it will work

9

Okay, i don’t have knowledge about dynamic form controller.

10

this has nothing to do with the formcontroller itself. more with basic angular stuff :wink:
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

11

Okay, Thanks for the information.

12

Above didn’t work but now i’m getting this error

EXCEPTION: control.registerOnChange is not a function