ionic-framework: bug: Input type number is not respected

Type: bug

Ionic Version: 2.x

Platform: all

Steps to reproduce:

Create an ion-input with type="number"
Add [(ngModel)] and (ngModelChange) to get the Value of the input
Check the type of the value using typeOf(value)
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/

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 8
Comments: 28 (12 by maintainers)

Most upvoted comments

I confirmed this is still an issue with latest.

+11

brandyscarney on Jan 24, 2017

workaround:

Template:

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

Function:

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

hope this helps.

dpsoft on Nov 22, 2016

@n2lose For me the workaround by @dpsoft works. I’m still hoping for a proper fix though.

felschr on May 26, 2017

I think there are a few issues going on in this one issue. Here’s my attempt at a recap (let me know if anything I said is wrong):

Original issue by @flavordaaave - using <ion-input type="number"> the value is returning string type instead of number. I can’t get the original plunker to work currently, thanks @mirkonasato for the plunkers, can reproduce with: http://plnkr.co/edit/EjsP3h?p=preview
@awe-sim - Alert is only accepting / returning string values in inputs
@marpstar / @joshgarwood - numeric keyboard is not appearing with <ion-input type="number">

So our issue is that we pass input type dynamically here: https://github.com/ionic-team/ionic/blob/master/src/components/input/input.ts#L103

Which is broken and reported by this Angular issue: https://github.com/angular/angular/issues/13243

Reopening this since it works without the dynamic binding.

Note to team - it may be blocked by Angular but it’s worth investigating. Maybe we should separate the alert / keyboard issue out.

brandyscarney on Dec 7, 2017

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?

mirkonasato on Nov 27, 2016

@shootdaj Good catch with the emitEvent: false. That is all correct. Basically, this needs to be fixed and there is no good, scalable workaround. This should really be higher on ionic’s priority list

zakton5 on Jul 20, 2017

Seems we still need to find some workaround to fix it temporary

n2lose on May 26, 2017

Any progress on this topic?

SwenVogel on May 23, 2017

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 on Nov 27, 2016