title: Mapping checkboxes to a model in Angular 5
body: <p>I have an angular 5 form that I'm struggling to map checkboxes to.</p>
  
  <p>This is my html for my form component:</p>
  
  <pre><code>    &lt;div class="form-group"&gt;
        &lt;label&gt;Title&lt;/label&gt;
        &lt;input type="text" name="title" class="form-control" minlength="2" required maxlength="30" autocomplete="off" id="title"
          #title="ngModel" [(ngModel)]="step1.title"&gt;
        &lt;div *ngIf="title.invalid &amp;&amp; f.submitted" class="text-danger"&gt;
          Promotion title is required and must be between 2 and 30 characters long.
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Pick one or more categories for your promotion&lt;/label&gt;
        &lt;div class="form-check" *ngFor="let topic of topics"&gt;
          &lt;input class="form-check-input" type="checkbox" value="" name="topicgroup" id="{{topic.name}}"&gt;
          &lt;label class="form-check-label" for="defaultCheck1" style="font-weight: normal"&gt;
            {{topic.name}}
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have 2 models in my component, one of Promotions which is what the form is for, and the other for topics.</p>
  
  <p>I have a network service that retrieves a list of topics.  </p>
  
  <p>What I would like, is for when the form is submitted, to add them to the Promotion model:</p>
  
  <pre><code>export class Promotion {
      title: string;
      topics: string[];
  }
  
  export class Topic {
      id: number;
      name: string;
  }
  </code></pre>
  
  <p>Currently the list of topics is displayed in my form as a series of checkboxes - not sure how to take the submitted data and save it to the topics[] array on the promotion model.</p>