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 — mbojko
– mbojko, Commented Apr 8, 2019 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
– Konrad Viltersten, Commented Apr 8, 2019 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
– mbojko, Commented Apr 8, 2019 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
– Konrad Viltersten, Commented Apr 9, 2019 at 18:18

trungvose · Accepted Answer · 2019-05-01 09:24:57Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related