title: Is there a way to create a 'number' input FormControl in Angular 2 Reactive Forms
body: <p>I have edited the official Angular.io tutorial on <a href="https://angular.io/guide/dynamic-form" rel="noreferrer">Dynamic Forms</a>, in order to add a form control/input field of type "number".</p>
  
  <p><a href="https://plnkr.co/edit/NslBCrFZLQnLblAqcmzV" rel="noreferrer">https://plnkr.co/edit/NslBCrFZLQnLblAqcmzV</a></p>
  
  <p>NumberQuestion class</p>
  
  <pre><code>import { QuestionBase } from './question-base';
  
  export class NumberQuestion extends QuestionBase&lt;string&gt; {
    controlType = 'numberbox';
    type: string;
  
    constructor(options: {} = {}) {
      super(options);
      this.type = options['type'] || '';
  
    }
  }
  </code></pre>
  
  <p>Creating a new NumberQuestion : </p>
  
  <pre><code>  //...
    new NumberQuestion({
      key: 'years',
      label : 'Years active',
      type : 'number',
      order : 4
  
    })
  </code></pre>
  
  <p>Template :</p>
  
  <pre><code>&lt;div [formGroup]="form"&gt;
    &lt;label [attr.for]="question.key"&gt;{{question.label}}&lt;/label&gt;
  
    &lt;div [ngSwitch]="question.controlType"&gt;
  
      &lt;input *ngSwitchCase="'textbox'" [formControlName]="question.key"
              [id]="question.key" [type]="question.type"&gt;
  
      &lt;input *ngSwitchCase="'numberbox'" [formControlName]="question.key"
              [id]="question.key" [type]="question.type"&gt;
  
      &lt;select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key"&gt;
        &lt;option *ngFor="let opt of question.options" [value]="opt.key"&gt;{{opt.value}}&lt;/option&gt;
      &lt;/select&gt;
  
    &lt;/div&gt; 
  
    &lt;div class="errorMessage" *ngIf="!isValid"&gt;{{question.label}} is required&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If you click on the Load Defaults button, and then the Save button you will see that the form's value object, preserves the numeric type of the formControl 'Years active'. </p>
  
  <p>But if you firstly type inside the 'Years active' control and then hit Save, you will see that the value has been transformed to string.</p>
  
  <p>I understand that this is normal behavior, as described here : 
  <a href="https://stackoverflow.com/a/35791893/2025271">https://stackoverflow.com/a/35791893/2025271</a></p>
  
  <p>I would like to know if there is a way to instruct Angular's FormControl to preserve number type inputs as "numbers", when accessing their value.</p>
  
  <p>I know that i can do this manually, by using parseInt() to edit value on change, but i am trying to find if there is a built in way to do it.</p>