Type is not maintained on the md-input.

[geelus]

Note: for support questions, please use one of these channels:
https://github.com/angular/material2/blob/master/CONTRIBUTING.md#question.
This repository's issues are reserved for feature requests and bug reports.

• Do you want to request a feature or report a bug?
  yes
• What is the current behavior?
  The types on the md-input control changes to string even though it's and integer initially.
• If the current behavior is a bug,
  please provide steps to reproduce and if possible a minimal demo of the problem
  via
  Sorry I don't have time for this but it's really simple to produce.
• What is the expected behavior?
  This behavior is not like the normal input box and I believe this is a bug. I checked with the normal input box and the type is maintained when I do two way data binding. But md-input changes all the bound item types to "string".
• What is the motivation / use case for changing the behavior?
• Which version of Angular and Material, and which browser and OS does this issue affect?
  Did this work in previous versions of Angular / Material?
  Please also test with the latest stable and snapshot versions.

I'm using version alpha 2 material and beta 14 angular2

• Other information
  (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

[hansl]

I'm sorry, are you saying the type attribute should not be a string? According to https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement the type property is a DOMString.

[geelus]

No that's not what I'm saying. I'm saying that if I use a two-way data binding, the md-input will change the type of the variable to string internally.

For example, if you have 2 inputs that are bound to 2 integer variables, if you add them together, you will produce a string:

1 + 2 = 12

But if you use a normal input box, the result is going to be an integer:

1 + 2 = 3

[geelus]

You can test this with typeof(variable) function in typescript.

[geelus]

This makes the md-input useless for number types because every time you use it you have to then use "parseInt()" function to parse the result.

[hansl]

Ah I see. You're saying the value itself should keep its type. Let me see.

[hansl]

After trying in chrome, the following will always be a string. So this isn't a problem with Angular or Material, but rather the browser giving us a string for value. Please note that we do not transform any values received from bindings.
<input type=number onchange="console.log(this.value, typeof(this.value))">

[geelus]

It's not from the browser nor from the Angular. This is definitely from Material's .

It's up to you to close it without taking an action but this is definitely a Material's bug since it's not happening for plane input control.

[geelus]

By the way, this behavior happens in two-way data binding. Here is an example:
value1:number = 1;
value2:number= 2;
calculateTotal(){
console.log(value1 + value2);

}

<md-input type=""number" [(ngModel)]="value1">
<md-input type=""number" [(ngModel)]="value2">
<button (click)="calculateTotal()">Calculate Total

Now to test:
increase the value1 and value2 by one, using the increase buttons. Click on the "Calculate Total" button. The result shows 23 (2+3).

Now test the same code using and you will see the result is 5 (2+3).

I hope it's clear now.

[hansl]

It's not from the browser nor from the Angular. This is definitely from Material's .

Not true. Here's a jsbin showing the same problem with Chrome (no Angular): http://jsbin.com/voburemavu/edit?html,output
I didn't have time to test on other browsers.

Also, your example is busted and doesn't show properly.

[geelus]

The sample you sent me is using JQuery from the dark ages!
Here is a sample with Angular 2:
http://plnkr.co/edit/yoPsJe58sEedzQg2U6qZ?p=preview

Now, if you replace the input box with md-input, the example will not work.

[geelus]

By the way, off course you will need to setup the material and so on.. But I hope you get the idea.

[hansl]

That example only displays "Hello Angular2" without any input. Please provide a proper example.

[geelus]

Sorry, I guess I copied the wrong URL. Please check this one:
http://plnkr.co/edit/yoPsJe58sEedzQg2U6qZ?p=preview