title: formControl and ngModel
body: <p>I have the following code on angular</p>
  
  <pre><code>&lt;div *ngFor="let student of students.controls; let i=index" [formGroupName]="i" [class.active]="student.checked"&gt;
      &lt;!-- The repeated address template --&gt;
      &lt;h4&gt;Student #{{i + 1}}
          &lt;input type="checkbox" formControlName="checked" [(ngModel)]="student.checked"&gt;
      &lt;/h4&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="center-block"&gt;First Name:
              &lt;input class="form-control" formControlName="firstName"&gt;
          &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="center-block"&gt;Last name:
          &lt;input class="form-control" formControlName="lastName"&gt;
          &lt;/label&gt;
      /div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is my css</p>
  
  <pre><code>div.active{
    background-color:#CCFFCC !important;
  }
  </code></pre>
  
  <p>at this line 
      </p>
  
  <p>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 <code>[(ngModel)]="student.checked"</code> I don't have the background color changing behaviour anymore but the formControlName "checked" works</p>
  
  <p>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</p>
  
  <p>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 <code>[(ngModel)]="student.checked"</code> is bind with the formControlName "checked")</p>