bug: Input type number is not respected

[davidruisinger]

Type: bug

Ionic Version: 2.x

Platform: all

Steps to reproduce:

1. Create an ion-input with type="number"
2. Add [(ngModel)] and (ngModelChange) to get the Value of the input
3. Check the type of the value using typeOf(value)
4. Type in a number into the input
   => Type is always a string

Expected behavior:
...
=> Type is a number.

See this plunk as an example:
https://run.plnkr.co/plunks/GHBFad/

[awe-sim]

The Alert component exhibits the similar behavior. Set an input type to number in a Alert component, the input value is still a string and the data returned to the button handler function also contains a string.

Ideally, the input value property should be string | number and not just string. And the data returned to the handler should have the appropriate type as well.

It is really cumbersome to do something like this:

let alert = new Alert({
    inputs: [{
        name: 'amount',
        type: 'number',
        value: myAmount.toString() // <-- SHOULD NOT REQUIRE toString()
    }],
    buttons: [{
        text: 'OK',
        handler: (data) => {
            console.log(typeof data.amount); // <-- SHOULD NOT OUTPUT 'string'
        }
    }]
});

[marpstar]

We're seeing similar issues with type="number". In the example Plunkr as well as our code, the number input fails to use the numeric keypad on iOS. Haven't tested Android.

Using <ion-input type="text" pattern="\d*"> does launch the numeric keypad on iOS.

[zakton5]

Same as #6570. This is still an issue. Could anyone from the team respond?

[zakton5]

Hey guys. Any progress on this?

[dpsoft]

workaround:

Template:

 <ion-input 
    type="number" 
    [ngModel]="progress" 
    (ngModelChange)="progress = convertToNumber($event)">
  </ion-input>

Function:

public convertToNumber(event):number {  return +event; }

hope this helps.

[mirkonasato]

The original plunk doesn't seem to work any more.

Here's a new one with Ionic 2.0.0-rc.3: http://plnkr.co/edit/EjsP3h?p=preview

Note that this works as expected with plain Angular: http://plnkr.co/edit/rIr9jVkUnIfW1FZIbROx?p=preview

[mirkonasato]

The underlying issue is with setting the type dynamically, in input.ts.

That doesn't work with plain Angular either, the value becomes a string after editing it: http://plnkr.co/edit/mG5F636NLpkmj09UPWkd?p=preview

Angular's NumberValueAccessor directive has input[type=number] as its selector. I guess that's only evaluated when the component is created, and at that point the type is not yet set?

[brandyscarney]

I confirmed this is still an issue with latest.

[ctc1995]

Hey everybody, How can i solve this problem?
Any help?