InputNumber

Rules

Basic Example

const rule = {
    type: "InputNumber",
    field: "price",
    title: "Price",
    value: 1,
    props: {
        precision: 2
    },
}

Props Configuration Examples

Set Value Range

const rule = {
    type: "InputNumber",
    field: "quantity",
    title: "Purchase Quantity",
    value: 1,
    props: {
        min: 1,
        max: 100,
        step: 1,
    },
}

Precision Control

const rule = {
    type: "InputNumber",
    field: "price",
    title: "Product Price",
    value: 99.99,
    props: {
        precision: 2,
        step: 0.01,
        placeholder: "Please enter price",
    },
}

Prefix and Suffix Labels

const rule = {
    type: "InputNumber",
    field: "price",
    title: "Price",
    value: 0,
    props: {
        addonBefore: "¥",
        addonAfter: "Yuan",
        min: 0,
        precision: 2,
    },
}

Disable Control Buttons

const rule = {
    type: "InputNumber",
    field: "score",
    title: "Score",
    value: 0,
    props: {
        controls: false,
        min: 0,
        max: 100,
        placeholder: "Enter score (0-100)",
    },
}

Events Examples

Listen to Value Changes

const rule = {
    type: "InputNumber",
    field: "price",
    title: "Product Price",
    value: 0,
    props: {
        min: 0,
        precision: 2,
        placeholder: "Please enter price",
    },
    on: {
        change: (value) => {
            console.log('Value changed:', value);
        },
        pressEnter: (e) => {
            console.log('Pressed Enter:', e);
        },
        step: (value, info) => {
            console.log('Clicked arrow:', value, info);
        },
    },
}

Calculate Total Price After Value Changes

const rule = [
    {
        type: "InputNumber",
        field: "price",
        title: "Unit Price",
        value: 0,
        props: {
            min: 0,
            precision: 2,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Automatically calculate the total price
                const quantity = $inject.api.getValue('quantity') || 1;
                const total = value * quantity;
                $inject.api.setValue('total', total.toFixed(2));
            },
        },
    },
    {
        type: "InputNumber",
        field: "quantity",
        title: "Quantity",
        value: 1,
        props: {
            min: 1,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Automatically calculate the total price
                const price = $inject.api.getValue('price') || 0;
                const total = price * value;
                $inject.api.setValue('total', total.toFixed(2));
            },
        },
    },
    {
        type: "InputNumber",
        field: "total",
        title: "Total Price",
        props: {
            disabled: true,
            precision: 2,
        },
    },
]

Complete configuration items: Ant-design-vue_InputNumber

value :Number

Props

Member	Description	Type	Default
addonAfter	Input with label, set suffix label	slot	-
addonBefore	Input with label, set prefix label	slot	-
autofocus	Auto focus	boolean	false
bordered	Whether to have border	boolean	true
controls	Whether to show increase/decrease buttons	boolean	true
decimalSeparator	Decimal separator	string	-
disabled	Disabled	boolean	false
formatter	Specify the format of the value displayed in the input box	function(value: number | string, info: { userTyping: boolean, input: string }): string	-
keyboard	Whether to enable keyboard shortcuts	boolean	true
max	Maximum value	number	Infinity
min	Minimum value	number	-Infinity
parser	Specify how to convert back to number from formatter, used together with formatter	function( string): number	-
precision	Precision of value	number	-
prefix	Input with prefix icon	slot	-
size	Input box size	string	-
status	Set validation status	'error' | 'warning'	-
step	Step value for each change, can be decimal	number|string	1
stringMode	String value mode, after enabling supports high precision decimals. At the same time, change event will return string type	boolean	false
upIcon	Custom up arrow icon	slot	<UpOutlined />
downIcon	Custom down arrow icon	slot	<DownOutlined />

Events

Event Name	Description	Callback Parameters
change	Callback when value changes	Function(value: number | string)
pressEnter	Callback when pressing Enter	function(e)
step	Callback when clicking up/down arrows	(value: number, info: { offset: number, type: 'up' | 'down' }) => void