Question

我有以下聚合物元素：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">

<dom-module id="number-input">
    <template>
        <paper-input type="number" label="amount" value="{{amount}}"></paper-input>
    </template>
    <script>
        Polymer({
            is: "number-input",
            properties: {
                amount: {
                    type: Number,
                }
            }
        });
    </script>
</dom-module>

“amount”属性始终是一个字符串。即使我将属性定义为“数字”。我错过了什么或这是正常行为吗？

桑德。

Answer 1

尝试将默认value设置为0并使用pattern进行输入验证：

<dom-module id="number-input">
<template>
    <paper-input type="number" label="amount" value="{{amount}}" pattern="\d+\.?\d*"></paper-input>
</template>
<script>
    Polymer({
        is: "number-input",
        properties: {
            amount: {
                type: Number,
                value:0
            }
        }
    });
</script>

Answer 2

您需要直接使用普通输入字段并指定is =“iron-input”和type =“number”。 type属性最终会为您提供所需的数字字段。其他数字输入属性如“min”也应该起作用。

您可以按照聚合物纸张输入容器documentation的描述添加标签，验证器和错误消息。

聚合物纸输入绑定总是文本

2 个答案: