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

  <div [ngSwitch]="question.controlType">

    <input *ngSwitchCase="'textbox'" 
           [formControlName]="question.key"
           [id]="question.key" 
           [type]="question.type"
           class="dyna-form-ctrl">

    <wj-combo-box *ngSwitchCase="'dropdown'" 
                  [formControlName]="question.key" 
                  [id]="question.key" 
                  [itemsSource]="question.options" 
                  [displayMemberPath]="'value'" 
                  [selectedValuePath]="'key'"
                  [isRequired]="false"
                  class="dyna-form-ctrl">
    </wj-combo-box>
    <wj-input-number *ngSwitchCase="'numeric'" 
                     [formControlName]="question.key" 
                     [id]="question.key" 
                     [step]="1" 
                     [isRequired]="false" 
                     class="dyna-form-ctrl"
                    >
    </wj-input-number>
    
    <i>State: </i>{{ngModelState(form.controls[question.key])}}
  </div> 

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


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->