question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ngModel on input of type "range" casts the variable to string

See original GitHub issue

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior Binding to an input of type="range" casts the variable to a string.

Expected/desired behavior It should be a number.

Reproduction of the problem I don’t think there’s a need for a Plunker, though I can make one if this is not enough. Here’s a gif instead with relevant code.

public typeof(whatever: any): string { return typeof whatever; }

a: number = 100;
b: number = 0.5;

<input type="number" [(ngModel)]="a"> {{a}} {{typeof(a)}}
<input type="range" [(ngModel)]="b"> {{b}} {{typeof(b)}}

What is the expected behavior? It should stay a number after going “through” ngModel.

What is the motivation / use case for changing the behavior? A number is a number.

I ended up concatenating strings instead of adding something I expected to be a number.

Please tell us about your environment:

  • Angular version: 2.0.0-rc.6
  • Browser: Chrome 53.0.2785.92, Firefox 48.0 on Ubuntu 16.04
  • Language: TypeScript 1.8.10

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:3
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
AlmogShaulcommented, Nov 13, 2016

@DzmitryShylovich this issue can be closed #11792 fixed it.

0reactions
angular-automatic-lock-bot[bot]commented, Sep 10, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Are [(ngModel)] bindings always strings? - Stack Overflow
Then it's a string. You can't even give a variable in this case, the input will have the variable's name as value. But...
Read more >
input[range] - AngularJS: API
Since the element value should always reflect the current model value, a range input will set the bound ngModel expression to the value...
Read more >
Property 'value' does not exist on type 'EventTarget' Error in ...
My input type is number . I'm using the newly preferred method of using an #id and then use id.value but it types...
Read more >
Angular Interview Question Flashcards | Quizlet
For example, any changes to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object). An...
Read more >
Angular Input Type Number - Ferramenta Pagano a Frignano
HTML : angularjs : how to restrict input type number to allow only even number ... to string". pattern attribute can be used...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found