<p dir="auto">If a bound value can be of more than one type, then HTML Number input fields are being bound as Strings. My expectation is that they should be bound to the same type as the input field. In my case, we change the type of the input field based on value of other fields on the form. This becomes a problem downstream when REST service is expecting numbers but gets strings. Obviously, there are a lot of downstream work arounds for this involving parsing the numbers and changing the types (both the Angular app, and the REST service), but none the less, it <strong>feels</strong> like a bug. Below is a very contrived example to demonstrate the problem.</p>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Typescript snippet:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export class Demo {
  value: number | String;
  inputType:String;

  constructor() {
    this.inputType = 'text';
  }

  makeNumber() {
    this.inputType = 'number';
  }

  log() {
    console.log(JSON.stringify(this.value));
  }
};"><pre class="notranslate"><code class="notranslate">export class Demo {
  value: number | String;
  inputType:String;

  constructor() {
    this.inputType = 'text';
  }

  makeNumber() {
    this.inputType = 'number';
  }

  log() {
    console.log(JSON.stringify(this.value));
  }
};
</code></pre></div>
<p dir="auto">HTML:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div&gt;
  &lt;input [(ngModel)]=.value&quot; [type]=&quot;inputType&quot;&gt;
&lt;/div&gt;
&lt;span class=&quot;button&quot; (click)=&quot;makeNumber()&quot;&gt;Make Number&lt;/&gt;
&lt;span class=&quot;button&quot; (click)=&quot;log()&quot;&gt;Log This&lt;/&gt;"><pre class="notranslate"><code class="notranslate">&lt;div&gt;
  &lt;input [(ngModel)]=.value" [type]="inputType"&gt;
&lt;/div&gt;
&lt;span class="button" (click)="makeNumber()"&gt;Make Number&lt;/&gt;
&lt;span class="button" (click)="log()"&gt;Log This&lt;/&gt;
</code></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">User clicks the "Make Number" button, enters 42 in the what is now a number input field, and then clicks "Log This". The console should log:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="42"><pre class="notranslate"><code class="notranslate">42
</code></pre></div>
<p dir="auto"><strong>Other information</strong></p>
<p dir="auto">User clicks the "Make Number" button, enters 42 in the what is now a number input field, and then clicks "Log This". The console actually logs:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;42&quot;"><pre class="notranslate"><code class="notranslate">"42"
</code></pre></div>
<p dir="auto">When setting the field of:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="num bZip;"><pre class="notranslate"><code class="notranslate">num bZip;
</code></pre></div>
<p dir="auto">From:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;billing_zip&quot;&gt;Zip&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;billing_zip&quot; [(ng-model)]=&quot;dto.bZip&quot; class=&quot;form-control&quot; [required]=&quot;true&quot;/&gt;
        &lt;/div&gt;"><pre class="notranslate"><code class="notranslate">        &lt;div class="form-group"&gt;
            &lt;label for="billing_zip"&gt;Zip&lt;/label&gt;
            &lt;input type="number" id="billing_zip" [(ng-model)]="dto.bZip" class="form-control" [required]="true"/&gt;
        &lt;/div&gt;
</code></pre></div>
<blockquote>
<p dir="auto">EXCEPTION: Error during evaluation of "ngModel"<br>
ORIGINAL EXCEPTION: type 'String' is not a subtype of type 'num' of 'value'.<br>
ORIGINAL STACKTRACE:</p>
</blockquote>
<p dir="auto">Using Angular Dart alpha 35</p>
<p dir="auto">Fix: if i set the field to String bZip on the DTO object</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="name: 'tickets'
version: 0.0.1
description: A ticket commerce application
author: Jack Murphy jack@rightisleft.com
homepage: https://www.rightisleft.com
environment:
  sdk: '&gt;=1.0.0 &lt;2.0.0'
dependencies:
#Server Dependencies
  json_object: &quot;1.0.19&quot;
  mongo_dart: &quot;0.1.46&quot;
  connection_pool: &quot;0.1.0+2&quot;
  dartson: &quot;0.2.4&quot;
  guinness: &quot;0.1.17&quot;
  shelf: '&gt;=0.6.2 &lt;0.7.0'
  shelf_static: &quot;0.2.2&quot;
  shelf_route: &quot;0.14.0&quot;
#Client Dependencies
  bootjack: &quot;0.6.5&quot;
  browser: &quot;&gt;=0.10.0+2 &lt;0.11.0&quot;
  sass: &quot;0.4.2&quot;
  angular2: &quot;2.0.0-alpha.35&quot;
transformers:
- dartson
- sass
- angular2:
    entry_points:
        - web/main.dart
    reflection_entry_points:
        - web/main.dart
- $dart2js:
    minify: true
    commandLineOptions:
    - --dump-info
    - --show-package-warnings
    - --trust-type-annotations
    - --trust-primitives"><pre class="notranslate"><code class="notranslate">name: 'tickets'
version: 0.0.1
description: A ticket commerce application
author: Jack Murphy jack@rightisleft.com
homepage: https://www.rightisleft.com
environment:
  sdk: '&gt;=1.0.0 &lt;2.0.0'
dependencies:
#Server Dependencies
  json_object: "1.0.19"
  mongo_dart: "0.1.46"
  connection_pool: "0.1.0+2"
  dartson: "0.2.4"
  guinness: "0.1.17"
  shelf: '&gt;=0.6.2 &lt;0.7.0'
  shelf_static: "0.2.2"
  shelf_route: "0.14.0"
#Client Dependencies
  bootjack: "0.6.5"
  browser: "&gt;=0.10.0+2 &lt;0.11.0"
  sass: "0.4.2"
  angular2: "2.0.0-alpha.35"
transformers:
- dartson
- sass
- angular2:
    entry_points:
        - web/main.dart
    reflection_entry_points:
        - web/main.dart
- $dart2js:
    minify: true
    commandLineOptions:
    - --dump-info
    - --show-package-warnings
    - --trust-type-annotations
    - --trust-primitives
</code></pre></div>