Angular 2: Default checked on checkbox in ngFor

Question

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.

I copied Your code into generated ng project and it works, I see no problem with Your code.. — Kasper Ziemianek, Jul 13 '17 at 20:17

score 22 · Accepted Answer · answered Jul 13 '17 at 20:49

22

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;
    }
  }

answered Jul 13 '17 at 20:49

Martin Brandhaug

1,052
1
10
21

thats the answer i had posted before, why you are posting again as a answer? – Sajeetharan Aug 20 '17 at 04:29
2

You did not have the (change)="changeCheckbox(i)" – Martin Brandhaug Aug 21 '17 at 12:33
2

shouldn't u pass the tags arguments in (change)="changeCheckbox(i)" ? – codemonkeybr Feb 23 '18 at 20:33

score 6 · Answer 2 · answered Jul 13 '17 at 20:13

6

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>

DEMO

answered Jul 13 '17 at 20:13

Sajeetharan

216,225
63
350
396

3

That'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. – Martin Brandhaug Jul 13 '17 at 20:39

score 3 · Answer 3 · answered Dec 10 '18 at 04:04

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>

score 1 · Answer 4 · answered Aug 15 '18 at 17:26

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;
    }

score 1 · Answer 5 · answered Mar 04 '19 at 10:36

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>

Angular 2: Default checked on checkbox in ngFor

5 Answers5