Ionic 2 ionic 3 - ion-checkbox inside ngIf or ngSwitch not working

Question

Hi there I have a problem - Ionic 2 ionic 3 - ion-checkbox inside ngfor and with condition, such as ngIf or ngSwitch not working

I posted my code online with working and not working versions..

https://forum.ionicframework.com/t/ionic-2-ionic-3-ion-checkbox-inside-ngif-or-ngswitch-not-working/105099

Working

<ion-list>
                <ion-item *ngFor=" let answer of question.Answers">
                             <ion-label>{{answer.Description}}</ion-label>
                            <ion-checkbox (change)="change($event, answer)"></ion-checkbox>
               </ion-item>
            </ion-list>

Not working 1

<ion-list>
                <ion-item *ngFor="let answer of question.Answers">
                    <ng-container *ngIf="QuestionType.MutipleChoice==question.QuestionType_Id">
                            <ion-label>{{answer.Description}}</ion-label>
                            <ion-checkbox (change)="change($event, answer)"></ion-checkbox>
                    </ng-container>                    
                </ion-item>
            </ion-list>

Not working 2

<ion-list>
                <ion-item *ngFor=" let answer of question.Answers">
                    <ng-container [ngSwitch]="question.QuestionType_Id">
                        <ng-container *ngSwitchCase="QuestionType.MutipleChoice">
                            <ion-label>{{answer.Description}}</ion-label>
                            <ion-checkbox (change)="change($event, answer)"></ion-checkbox>
                        </ng-container>
                    </ng-container>
                </ion-item>
            </ion-list>

This one is working but only until I am trying to enter the checkboxes inside… Tried with templates , span tags instead of ng-container… etc…

<ion-list>
                <ion-item>
                    <div *ngFor="let answer of question.Answers">
                        <div [ngSwitch]="question.QuestionType_Id">
                            <span *ngSwitchCase="QuestionType.YesNo">
                                                <span *ngIf="answer.Description=='Yes'" style="  display: inline-block;">
                                                            <button ion-fab  right><ion-icon name="checkmark"></ion-icon></button>
                                                        </span>
                                                 <span *ngIf="answer.Description=='No'" style="  display: inline-block;">
                                                                <button ion-fab color="danger" left><ion-icon name="close"></ion-icon></button>
                                                        </span>
                            </span>
                            <ng-container *ngSwitchCase="QuestionType.OneChoise">
                                {{ answer.Description }}
                            </ng-container>
                            <ng-container *ngSwitchCase="QuestionType.MutipleChoice">
                                {{ answer.Description }}
                                <!-- <ion-label>{{ answer.Description }}</ion-label> -->
                                <!-- <ion-checkbox color="dark" checked="answer.checked" [(ngModel)]="answer.checked"></ion-checkbox>
                                             -->
                            </ng-container>

                        </div>
                    </div>
                </ion-item>
            </ion-list>

The ngSwitch works for other types like - yes no , or one choice , but not here when adding ion checkbox. The json is working also, meaning without the checkbox or without the switch I can see the multiple options.

Any ideas how I can solves this ? What am I missing? Puling hear for a day now…

Did anyone solve it?

Answer 1

I think this will solve the issue.

export class HomePage {
  
  questions = [{id:1,text:'Question 1', answers:[{id:1},{id:2}]},{id:2,text:'Question 2', answers:[{id:11},{id:22}]}]
  
  constructor(private navController: NavController, private service: Service, private formBuilder:FormBuilder) { 
    this.surveyForm = this.formBuilder.group({
      questions: formBuilder.array([])
    })

    for (var i = 0; i < this.questions.length; i++) {
        // get multiple
        let question = formBuilder.group({
          question_id: [this.questions[i].id, Validators.required],
          answer_ids: formBuilder.array([])
        });
        this.surveyForm.controls['questions'].push(question);
    }
  }

  onChange(id, isChecked, index) {
    const answers = <FormArray>this.surveyForm.controls.questions.controls[index].controls.answer_ids
    
    if(isChecked) {
      answers.push(new FormControl(id))
    } else {
      let idx = answers.controls.findIndex(x => x.value == id)
      answers.removeAt(idx)
    }
  }
}

<ion-header>
  <ion-navbar>
    <ion-title>{{ appName }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <div *ngIf="surveyForm">
    <form [formGroup]="surveyForm">
      <div formArrayName="questions">
        <div *ngFor="let question of questions; let i = index" [formGroupName]="i" padding-bottom>
          <ion-row>
            <ion-col col-10>
              <h5>{{ question.text }}</h5>
              <ng-container>
                <ion-list formArrayName="answer_ids">
                  <div *ngFor="let choice of question.answers; let j = index">
                    <ion-item>
                      <ion-label style="white-space: normal;">{{ choice.id }}</ion-label>
                      <ion-checkbox (ionChange)="onChange(choice.id, $event.checked, i)" value="choice.id"></ion-checkbox>
                    </ion-item>
                  </div>
                </ion-list>
              </ng-container>
            </ion-col>
          </ion-row>
      </div>
      </div>
    </form>
  </div>
  
  <pre>{{surveyForm.value | json}}</pre>
</ion-content>

http://plnkr.co/edit/yV94ZjypwBgHAlb0RLK2?p=preview Trying it now.