Input

Rules

Basic Example

const rule = {
    type:"input",
    title:"Product Name",
    field:"goods_name",
    value:"iphone 7",
    props: {
        placeholder: "Enter product name",
        clearable: true,
    },
    validate:[
        { required: true, message: 'Enter goods_name', trigger: 'blur' },
    ],
}

Props Configuration Examples

Text Input Box (text)

const rule = {
    type:"input",
    title:"Username",
    field:"username",
    props: {
        placeholder: "Enter username",
        clearable: true,
        prefixIcon: "user",
    }
}

Textarea

const rule = {
    type:"input",
    title:"Product Description",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "Enter product description",
        autosize: { minRows: 3, maxRows: 6 },
    }
}

Password Input Box (password)

const rule = {
    type:"input",
    title:"Password",
    field:"password",
    props: {
        type: "password",
        placeholder: "Enter password",
        clearable: true,
    }
}

Clearable Input Box

const rule = {
    type:"input",
    title:"Search Keyword",
    field:"keyword",
    props: {
        placeholder: "Enter search keyword",
        clearable: true,
    }
}

Show Character Count

const rule = {
    type:"input",
    title:"Product Description",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "Enter product description",
        maxlength: 200,
        showWordLimit: true,
    }
}

Disabled and Readonly

const rule = {
    type:"input",
    title:"Order Number",
    field:"order_no",
    value:"ORD20240101001",
    props: {
        disabled: true,
        // or use readonly: true,
    }
}

Events Examples

Listen to Input Changes and Focus Events

const rule = {
    type:"input",
    title:"Search Keyword",
    field:"keyword",
    props: {
        placeholder: "Enter search keyword",
        clearable: true,
    },
    on: {
        change: (value) => {
            console.log('Input value changed:', value);
        },
        blur: () => {
            console.log('Lost focus');
        },
        focus: () => {
            console.log('Gained focus');
        },
        clear: () => {
            console.log('Input cleared');
        },
    },
}

Real-time Search

const rule = {
    type:"input",
    title:"Search Products",
    field:"keyword",
    props: {
        placeholder: "Enter product name to search",
        clearable: true,
        prefixIcon: "search",
    },
    inject: true,
    on: {
        change: ($inject, value) => {
            // Real-time search: trigger search as user types
            if (value && value.length >= 2) {
                // Call search API
                searchProducts(value).then(res => {
                    // Update search results
                    $inject.api.setValue('searchResults', res.data);
                });
            }
        },
    },
}

Linkage Update Other Fields (change event)

const rule = [
    {
        type:"input",
        title:"Product Name",
        field:"goods_name",
        props: {
            placeholder: "Enter product name",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Auto-generate product code when name changes
                if (value) {
                    const code = 'GD' + value.substring(0, 3).toUpperCase() + Date.now().toString().slice(-6);
                    $inject.api.setValue('goods_code', code);
                }
            },
        },
    },
    {
        type:"input",
        title:"Product Code",
        field:"goods_code",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: TDesign_Input

value :String