formControl and ngModel

Question

I have the following code on angular

<div *ngFor="let student of students.controls; let i=index" [formGroupName]="i" [class.active]="student.checked">
    <!-- The repeated address template -->
    <h4>Student #{{i + 1}}
        <input type="checkbox" formControlName="checked" [(ngModel)]="student.checked">
    </h4>
    <div class="form-group">
        <label class="center-block">First Name:
            <input class="form-control" formControlName="firstName">
        </label>
    </div>
    <div class="form-group">
        <label class="center-block">Last name:
        <input class="form-control" formControlName="lastName">
        </label>
    /div>
</div>

here is my css

div.active{
  background-color:#CCFFCC !important;
}

at this line

The problem is when the checkBox is checked the background color of my array element containing the checkbox become green as I want but the formControlName "checked" is not taken into account and when I delete [(ngModel)]="student.checked" I don't have the background color changing behaviour anymore but the formControlName "checked" works

Actual behaviour, I build my array with an imported student having the properties checked true, the box is not checked but when I check it the background become green

Wanted behaviour : I build my array with an imported student having the properties checked true, the box is checked and when I uncheck it the green background disappear (my ngModel [(ngModel)]="student.checked" is bind with the formControlName "checked")

alehn96 · Answer 1 · 2017-06-21T21:05:04.403

0

try this, use ngClass

<div [ngClass]="{'active':student.checked}">...</div>

in div tag put student, you have strudent, change it

edited Jun 21 '17 at 21:05

answered Jun 21 '17 at 19:48

alehn96

1,363
1
13
23

Unfortunately, it doesn't work,It does the same behaviour than with [class.active]="student.checked" by the way I made a typo simplifying the example in my code I do have [class.active]="student.checked" and I also Tried
...
– q.b Jun 21 '17 at 20:25
you have import CommonModule – alehn96 Jun 21 '17 at 20:57
you have strudent in div and in checkbox student, that is the problem – alehn96 Jun 21 '17 at 21:04

score 0 · Accepted Answer · answered Jun 22 '17 at 07:24

I've found the solution

<div *ngFor="let student of students.controls; let i=index" 
[formGroupName]="i" [class.active]="student.controls.checked.value>
    <!-- The repeated address template -->
    <h4>Student #{{i + 1}}
        <input type="checkbox" formControlName="checked">
    </h4>

This code works

Thanks for the help.

formControl and ngModel

2 Answers2