Formulário reativo

Problema criar um input checkbox utilizando esse exemplo da documentação do angular.

Estava lendo o cookbook do angular e resolvi reproduzir esse exemplo (https://angular.io/docs/ts/latest/cookbook/dynamic-form.html) e amplia-lo com mais elementos para testar meu conhecimento.

Adicionei o textarea e funcionou bem, mas quando fui adicionar o checkbox não consigo pegar os valores dos elementos checados nem validar. Acredito que estão diretamente relacionados.

A renderização do campo checkbox na tela com os elementos eu consegui. O problema é mesmo obter os valores.

Criei esse artefado para representar o checkbox. question-checkbox.ts

import { QuestionBase } from './question-base';

export class CheckboxQuestion extends QuestionBase<string> {
  controlType = 'checkbox';
  type: string;
  options: {key: string, value: string, label: string}[] = [];

  constructor(options: {} = {}) {
    super(options);
    this.type = options['type'] || '';
    this.options = options['options'] || [];

  }
}

Adicionei utilizando o service que já existe no exemplo do cookbook.

question.service.ts

...
new CheckboxQuestion({
        key: 'gender',
        label: 'Gender',
        type: 'checkbox',
        options: [
          {key: 'male',  value: 'male', label: 'Male'},
          {key: 'female',  value: 'female', label: 'Female'},
          {key: 'others',   value: 'others', label: 'Others'},
          {key: 'unknown', value: 'unknown', label: 'Unknown'}
        ],
        order: 5
      }),
...

Aqui como ficou na tela.

dynamic-form-question.component.html

<div [formGroup]="form">
    <label [attr.for]="question.key">{{question.label}}</label>
    <div [ngSwitch]="question.controlType">

        <textarea *ngSwitchCase="'textarea'" [formControlName]="question.key" [id]="question.key" [rows]="question.rows" [cols]="question.cols">
        </textarea>

        <div *ngSwitchCase="'checkbox'">
            <span *ngFor="let opt of question.options">
              <input [formControlName]="question.key" [type]="question.type" [id]="opt.key"  > {{opt.label}}
            </span>
        </div>

    </div>
    <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
</div>

Já agradeço por qualquer ajuda para esse exercício.

att,

Jhonnatan Cebidanes