CODEWITHSUNDEEP
htmlangularcheckbox
sudheer singh
sudheer singh

Reputation: 922

How to pre-select and update checkboxes in Angular 2+

I want to implement a checklist in Angular. Some boxes have to be pre-checked based on an array in the ts file and the array has to be updated when a checkbox is checked. I am doing it like:

<div class='form-group que-box' *ngFor="let option of currentQuestion.options">
  <input type="checkbox" aria-label="Checkbox 1" [value]="option.text" name="checkBox" [(ngModel)]="optionsSelectedArray"/>
  <label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>

optionsSelectedArray contains the option IDs retrieved from server.

But it doesn't work. All the checkboxes come checked when the the division is rendered.

EDIT

I have changed my code as follows :

<div class='form-group que-box' *ngFor="let option of currentQuestion.options">
  <input type="checkbox" id="{{option.optionId}}" name="checkBox" [(ngModel)]="option.userResponse" (ngModelChange)= "setResponseChanged()">
  <label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>

Here option.userResponse in boolean. Now on selecting the checkboxes the currentQuestion object is correctly changing but when the checklist loads for the first time, the checkboxes are not checked correctly.All the checkboxes come checked if the option.userResponse is true for the last item ,none come checked otherwise.

Upvotes: 2

Views: 2837

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657338

Perhaps this might do what you want

<div class='form-group que-box' *ngFor="let option of currentQuestion.options; let i=index">
  <input type="checkbox" aria-label="Checkbox 1" name="checkBox" [(ngModel)]="optionsSelectedArray[i]"/>
  <label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>

(I added ; let i=index and [i])

Upvotes: 2

Related Questions