Getting a string instead of expected number from Angular template and input native element's value

Question

I have an event that fires on key up like this.

value: number;
onKeyUp(event: KeyboardEvent) {
  this.value = this.input.nativeElement.value;
  console.log("typo", typeof (this.value));
}

For some reason, the value stored is a string not a number. I've tried using syntax like this to no avail.

this.value = this.input.nativeElement.value as number;

Instead of that, I had to use the JS hack from the past, i.e. the unary plus operator like so.

this.value = +this.input.nativeElement.value;

Is there a more proper approach to make sure that my input provides a number? Or am I already doing it kinda right?

The markup provides no useful info, probably, but just in case, here it is.

<input #input
  value="{{value}}"
  (keyup)="onKeyUp($event)"
  (keydown.Tab)="onKeyUp($event)">

Possible duplicate of [HTML input type="number" still returning a string when accessed from javascript](https://stackoverflow.com/questions/35791767/html-input-type-number-still-returning-a-string-when-accessed-from-javascript) — mbojko, Apr 08 '19 at 17:54
@mbojko Not quite right, mate. My question relates to Typescript where variable are typed. I also used the *as* operator and declared *number* in the emitter. I believe I had well based reason to expect a different behavior. Still, a good link but not a dupe, in my opinion. — Konrad Viltersten, Apr 08 '19 at 19:13
The thing is - your TS gets compiled to JS and all implicit type checking it does, it does at the build time. It doesn't put additional type checking/conversions at run time - if you need them, you must program them explicitely. And the key line is: `this.value = this.input.nativeElement.value`. It doesn't matter what type you declared - you took the value directly from the DOM. — mbojko, Apr 08 '19 at 19:21
@mbojko I get your point. Still, I'd argue that it's **not** a dupe as the questions arise from two different observations (although related to the same phenomenon, under the hood, like you said). Using TS, I feel that I should be notified that *oh, dude, you're putting a string into a number*, since the value from the native element always will be a string. — Konrad Viltersten, Apr 09 '19 at 18:18

trungk18 · Accepted Answer · 2019-05-01T09:24:57.877

It is written on the spec that value will always be stored as string. So even if you set the input type as number, it only update the user interface. But the value is still the same in string type.

I don't extract the data the same way with you. Not sure if you have any reason for doing so. I always use the ngModel directive.

Basically it is the two way binding, if you update the data model, it will update the UI and the other way around. So that you don't have to get the value manually through the ElementRef as you did on the question. It is done automatically for you.

app.component.html

<input type="number" [(ngModel)]="inputVal" (keyup)="onKeyUp($event)">

app.component.ts

onKeyUp(event: KeyboardEvent) {    
  console.log(this.inputVal);
}

Noted the type="number" on the HTML code. When you set it like that, the inputVal will be return as a number. I didn't really check the source code but probably Angular will parse it automatically somehow.

If you don't put it, the value will still be keep as a string.

I prepare the example for it. Please check https://stackblitz.com/edit/angular-ngmodel-number

You can just type into the input and see the value and the type.

Getting a string instead of expected number from Angular template and input native element's value

1 Answers1