Issue
I have a component that injects a child that is an auxiliary component. In the parent component I have an NgFor
that duplicates the child component and inside the child I have another ngfor
that creates some checkboxes.
The problem is that when I check just one box it also checks the same box in another group. How can I resolve it?
Parent component:
<div class="bloco-bilhete" id="bilhete1" style="padding: 15px" *ngFor="let divs of div">
<app-checkbox [Itens]="Listdays" (ItensReturn)="setDayReturn($event)"</app-checkbox>
</div>
child:
<div class="flex-container">
<div class="flex-filho" *ngFor="let i of Itens; index as n">
<input id="checkAceite{{n}}Div{{Div}}" class="form-check-input checbox-espaco" type="checkbox" [checked]="i.value" (change)="i.value = !i.value">
<label for="checkAceite{{n}}Div{{Div}}" style="font-size: 12pt">{{i.nome}}</label>
</div>
</div>
I want the check not to duplicate in other blocks.
Solution
It's likely due to the checkboxes in different app-checkbox instances share the same model. So when you check a checkbox in one, it affects across all instances.
So try something like:
<div class="bloco-bilhete" id="bilhete{{divId}}" style="padding: 15px" *ngFor="let div of div; let divId= index">
<app-checkbox [Itens]="div.Listdays" (ItensReturn)="setDayReturn($event)" [divId]="divId"></app-checkbox>
</div>
Inside child comp.
<div class="flex-container">
<div class="flex-filho" *ngFor="let i of Itens; let n = index">
<input id="checkAceite{{n}}Div{{divId}}" class="form-check-input checbox-espaco" type="checkbox" [checked]="i.value" (change)="i.value = !i.value">
<label for="checkAceite{{n}}Div{{divId}}" style="font-size: 12pt">{{i.nome}}</label>
</div>
</div>
Also a bit out of scope but you should add name attribute to checkboxes when working with them in a form
Answered By - Thuan Tran
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.