Polymer: Model: number data type is converted to string due to user input
Properties defined as of Number data type are converted to String data type due to user input. I wonder this symptom does not happen only to iron-input or paper-input, but this is Polymer's behavior. Is there simple way to stop the data type conversion?
Please enter any number in the following iron-input. "string" will always pop up.
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="proto.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>
proto.html:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-input/iron-input.html">
<dom-module id="proto-element">
<template>
<input is="iron-input" bind-value="{{value}}">
</template>
</dom-module>
<script>
Polymer({
is: "proto-element",
properties:{
value:{
type:Number,
value:1,
observer:"valueChanged"
}
},
valueChanged:function(n,o){
if(typeof o != "undefined")
alert(typeof n);
}
});
</script>
masaoliou
All 3 comments
This isn't Polymer's behavior, it's standard DOM behavior. The input tag's value property is a string value:
https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement
The type: Number on the property doesn't affect this; that value is only used when deserializing
an attribute value from markup. So, if you have markup like this:
<my-element value="123">
You're configuring the value property with the string "123". If value is type: Number,
it will be deserialized as the number 123.
On the other hand, this:
<my-element value="{{hostValue}}">
Binds the hosts's hostValue property to my-element's value property. No type conversion is involved here; they have the same value.
So, you'll need to convert the input's string value to something else. input Provides a valueAsNumber property, which you could bind like this:
<input is="iron-input" type="number" value-as-number="{{value::input}}">
Alternately, you could coerce the value in your valueChanged method:
valueChanged:function(n) {
if(typeof n == "string") {
this.value = Number(n);
}
}
arthurevans
on 1 Jul 2015
@arthurevans Thank you so much for the detailed explanation!
Perhaps adding it to Polymer's FAQ will help other users, too.
masaoliou
on 2 Jul 2015
If you use props type arrayObject. you can resove by like this.
https://github.com/pongpanot-t/lab-polymer/blob/master/data-binding/bind-prop-number.html
tonsai-j
on 30 Sep 2016
Related issues
limonte
·
3Comments
bmodeprogrammer
·
3Comments
abdonrd
·
4Comments
SergRZ
·
3Comments
myuseringithub
·
3Comments
Most helpful comment
This isn't Polymer's behavior, it's standard DOM behavior. The
inputtag'svalueproperty is a string value:The
type: Numberon the property doesn't affect this; that value is only used when deserializingan attribute value from markup. So, if you have markup like this:
You're configuring the
valueproperty with the string "123". Ifvalueistype: Number,it will be deserialized as the number 123.
On the other hand, this:
Binds the hosts's
hostValueproperty tomy-element'svalueproperty. No type conversion is involved here; they have the same value.So, you'll need to convert the input's string value to something else. input Provides a
valueAsNumberproperty, which you could bind like this:Alternately, you could coerce the value in your
valueChangedmethod: