title: Angular 4 : How to assign array of string into checkbox in reactive forms
body: <p>I am trying display checkboxes for my user roles:</p>
  
  <p>For eg. I have two user roles : 1.Admin 2.Employee</p>
  
  <p>I have an array of roles in userObject:</p>
  
  <pre><code>user={
      "name":"Bhushan",
      "email":"bhushan@yaho.com",
      "roles":['Admin','Employee']
  }
  </code></pre>
  
  <p>I want to use reactive form to populate this model into form. I want to populate the roles array into read-only checkboxes i.e. when form loads, user can edit name &amp; email but checkboxes will show <code>admin</code> toggeled if user has admin role or untoggled if he is not an admin. same can be said for employee role.</p>
  
  <p>So far I have tried following:</p>
  
  <pre><code>&lt;form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate&gt;
    &lt;div style="margin-bottom: 1em"&gt;
      &lt;button type="submit" [disabled]="userForm.pristine" class="btn btn-success"&gt;Save&lt;/button&gt; &amp;nbsp;
      &lt;button type="reset" (click)="revert()" [disabled]="userForm.pristine" class="btn btn-danger"&gt;Revert&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="center-block"&gt;Name:
          &lt;input class="form-control" formControlName="name"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="center-block"&gt;Email:
          &lt;input class="form-control" formControlName="email"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="form-group" *ngFor="let role of roles;let i=index"&gt;
      &lt;label&gt;
          // I tried this, but it doesn't work
          &lt;!--&lt;input type="checkbox" [name]="role" [(ngModel)]="role"&gt;--&gt;
         {{role}}
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;p&gt;userForm value: {{ userForm.value | json}}&lt;/p&gt;`
  </code></pre>
  
  <p>Any Inputs?</p>