Angular 2: Default checked on checkbox in ngFor
Solution 1
This solved my problem with the checked/unchecked checkboxes, while I still had control over changes in my variables.
HTML
<div class="form-group">
<div class="form-check" *ngFor="let tag of tags; let i = index;">
<label class="form-check-label" for="tag{{tag.value}}">
<input
class="form-check-input"
type="checkbox"
id="tag{{tag.value}}"
name="tagOptions"
(change)="changeCheckbox(i)"
[checked]="tag.checked">
{{tag.name}}
</label>
</div>
.ts
changeCheckbox(tags, i) {
if (tags) {
this.tags[i].checked = !this.tags[i].checked;
}
}
Solution 2
Use the checked property instead of ngModel,
<div class="form-group">
<div class="form-check" *ngFor="let tag of tags">
<label class="form-check-label" for="tag{{tag.value}}">
<input
class="form-check-input"
type="checkbox"
id="tag{{tag.value}}"
name="tagOptions"
[checked]="tag.checked">
{{tag.name}}
</label>
</div>
</div>
Solution 3
I know this is an old thread but I ran into a similar issue recently, the problem is on the name tag, since it's the same for every checkbox, the Form complains, you can use it as follows for example:
<div class="form-group">
<div class="form-check" *ngFor="let tag of tags;">
<label class="form-check-label" for="tag{{tag.value}}">
<input
class="form-check-input"
type="checkbox"
id="tag{{tag.value}}"
[name]="tag.name"
[(ngModel)]="tag.checked">
{{tag.name}}
</label>
</div>
</div>
Solution 4
This question save my brain health haha. However I did an "upgrade" in the correct answer:
HTML:
<div class="form-group">
<div class="form-check" *ngFor="let tag of tags; let i = index;">
<label class="form-check-label" for="tag{{tag.value}}">
<input
class="form-check-input"
type="checkbox"
id="tag{{tag.value}}"
name="tagOptions"
(change)="changeCheckbox($event, i)"
[checked]="tag.checked">
{{tag.name}}
</label>
</div>
TS:
changeCheckbox(event, index){
this.tags[index] = event.target.checked;
}
Solution 5
Use the name tag as id instead:
<label class="form-check-label" for="tag{{tag.value}}">
<input
class="form-check-input"
type="checkbox"
id="tag{{tag.value}}"
name="tag{{tag.value}}"
[(ngModel)]="tag.checked">
{{tag.name}}
</label>
Related videos on Youtube
Martin Brandhaug
Updated on March 05, 2020Comments
-
Martin Brandhaug about 4 years
I'm trying to set default value as checked on a checkbox inside my ngFor. This is my array of checkbox items:
tags = [{ name: 'Empathetic', checked: false }, { name: 'Smart money', checked: true }, { name: 'Minimal help after writing check', checked: false }, { name: 'Easy term sheet', checked: true }];
This is my html
<div class="form-group"> <div class="form-check" *ngFor="let tag of tags;"> <label class="form-check-label" for="tag{{tag.value}}"> <input class="form-check-input" type="checkbox" id="tag{{tag.value}}" name="tagOptions" [(ngModel)]="tag.checked"> {{tag.name}} </label> </div> </div>
The desired result is to get 2 checked, and 2 unchecked boxes, but all of them are unchecked. I've also tried different variations with [checked]="tag.checked", but it didn't seem to do the trick.
-
Kasper Ziemianek almost 7 yearsI copied Your code into generated ng project and it works, I see no problem with Your code..
-
-
Martin Brandhaug almost 7 yearsThat's correct, this answers my question. However, it leads to another problem: If I uncheck or check any of the checkboxes, the changes won't be registered.
-
Sajeetharan almost 7 yearsthats the answer i had posted before, why you are posting again as a answer?
-
Martin Brandhaug over 6 yearsYou did not have the (change)="changeCheckbox(i)"
-
codemonkeybr about 6 yearsshouldn't u pass the tags arguments in (change)="changeCheckbox(i)" ?