title: Mapping FormGroup to Interface Object
body: <p>I've been attempting to bind form data in my angular HTML template to an interface in my Component.</p>
  
  <p>I've been following the below tutorial, but my FormGroup is not auto-casting to the interface on the back-end as the tutorial does.</p>
  
  <ul>
  <li><a href="https://toddmotto.com/angular-2-forms-reactive" rel="noreferrer">Reactive Forms Tutorial</a></li>
  </ul>
  
  <p>My code is as follows:</p>
  
  <hr>
  
  <h2>Component</h2>
  
  <pre class="lang-typescript prettyprint-override"><code>import { Component, OnInit } from "@angular/core";
  import { FormGroup, FormBuilder, FormArray, FormControl, Validators } from "@angular/forms";
  import { DeckBuildRequest } from "../domain-models/interfaces/deckBuildRequest.interface";
  
  @Component({
    selector: "deck-options",
    templateUrl: "./deck-options.component.html",
    styleUrls: ["./deck-options.component.css"]
  })
  export class DeckOptionsComponent {
    private deckBuildRequest: FormGroup;
  
    constructor(formBuilder: FormBuilder) {
      this.deckBuildRequest = formBuilder.group({
        "deckSize": 60,
        "deckColors": formBuilder.array([
            {color: "Blue", checked: false},
            {color: "Green", checked: false},
            {color: "Red", checked: false},
            {color: "White", checked: false},
            {color: "Black", checked: false},
            {color: "Colorless", checked: false}
          ])
      });
    }
  
    GenerateDeck(request: DeckBuildRequest) {
      alert(request.deckSize);
    }
  
  }
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="deck-options"&gt;
        &lt;form [formGroup]="deckBuildRequest"
              (ngSubmit)="GenerateDeck(deckBuildRequest)"&gt;
          &lt;span&gt;
            &lt;label&gt;&lt;input formControlName="deckSize" type="number" max="100" min="1"&gt;Number of Cards&lt;/label&gt;
          &lt;/span&gt;
          &lt;div&gt;
            &lt;label [attr.for]="'color'+i"
              *ngFor="let colorOption of deckBuildRequest.controls['deckColors'].controls, let i = index"
            &gt;
              &lt;input 
                    type="checkbox"
                    id="color{{i}}"
                    value="{{colorOption.value.color}}"
                    ng-checked="colorOption.value.checked"
              /&gt;
              {{colorOption.value.color}}
            &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;button type="submit"&gt;Generate Deck!&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <h2>Interface</h2>
  
  <pre class="lang-typescript prettyprint-override"><code>export interface DeckBuildRequest {
      deckSize: number;
      deckColors: [{
          color: string;
          checked: boolean;
      }];
  }
  </code></pre>
  
  <hr>
  
  <p>What am I missing here?</p>