Why are angular ngFor components sharing the same variables

user_7071690 0
Viewed 144

I'm making a list of questions (question's name and yes/no checkboxes)

The problem is that when I click on the second question checkboxes, it still changes the ones from first component.

Here's my code:

Rendering the list of questions:

<div *ngFor="let question of questions">
  <app-question [question]="question"></app-question>
</div>

Each question:

<div class="question">
    {{question}}
    <div class="checkboxes">
        <label class="checkbox-label">
            <input class="checkbox" [(ngModel)]="checked.yes" (ngModelChange)="checkboxChanged('yes')" type="checkbox" id="check1"/>
            <label for="check1" class="custom-checkbox"></label>
        </label>
        <label class="checkbox-label">
            <input class="checkbox" [(ngModel)]="checked.no" (ngModelChange)="checkboxChanged('no')" type="checkbox" id="check2"/>
            <label for="check2" class="custom-checkbox"></label>
        </label>
    </div>
</div>

checkboxChanged(value): void {
    value === 'yes' ? this.checked["no"] = false : this.checked["yes"] = false;
}

Thanks

Edit: https://stackblitz.com/edit/angular-59bkvw

Solution: The problem was that my inputs and labels were sharing the same ids between components. I assigned an unique id like id="{{question}}" and it works. Thank you all for help.

ngfor angular
4 Answers

So far I just found you have a single problem related to label for attribute and input id. The problem is that the id is not unique, all input elements have the same id. To solve this you have to generate the id dynamically:

Pass the index of the element as prefix of the id :

template 

<div class="question">
    {{question}}
    <div class="checkboxes">
        <label class="checkbox-label">
            <input class="checkbox" [(ngModel)]="checked.yes" (ngModelChange)="checkboxChanged('yes')" type="checkbox" [id]="index+'yes'"/>
            <label [for]="index+'yes'" class="custom-checkbox"></label>
        </label>
        <label class="checkbox-label">
            <input class="checkbox" [(ngModel)]="checked.no" (ngModelChange)="checkboxChanged('no')" type="checkbox" [id]="index+'no'"/>
            <label [for]="index+'no'" class="custom-checkbox"></label>
        </label>
    </div>
</div>

parent component

<div *ngFor="let question of questions;let index = index">
  <app-question [question]="question" [index]="index"></app-question>
</div>

demo

user_39806210

I have checked your code and not able to replicate your issue, you need to provide the full code or best would create a stackblitz instance.

Here is the stackblitz instance created by me using the code provided by you: https://stackblitz.com/edit/angular-k73iqa

user_105786380

If you have a list of questions with Yes/No answers I recommend using radio buttons.

Check this stackblitz for an example.

<div class="question">
    {{question.text}}
    <input type="radio" value="yes" [name]="answer + question.id" [(ngModel)]="question.answer">Yes
    <input type="radio" value="no" [name]="answer + question.id" [(ngModel)]="question.answer">No
</div>
user_20503060

The problem is with CSS, not Angular. Once you remove the following CSS from question.component.css, it starts working:

.checkbox {
    opacity: 0;
}
.checkbox-label{
    position: relative;
}
user_32662180
Related