Ant Design Vue數字輸入框InputNumber 有值但是驗證卻不能夠通過

InputNumber 有值但是驗證卻不能夠通過

今天遇見這樣一個問題，InputNumber 輸入框中有值
但是卻卻提示驗證不能夠通過
后來經過分析，懷疑是數據類型不正確，
后面經過驗證，果然是數據類型不正確

正確做法

<template>
    <div>
        <a-form
            ref="formRef"
            :model="formState"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
        >
            <a-form-item ref="name" label="金額" name="money">
                <a-input-number id="inputNumber" v-model:value="formState.money" :min="1" :precision="2" :max="10000" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="onSubmit">Create</a-button>
                <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
            </a-form-item>
         </a-form>
    </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
export default {
    setup () {
        const rules = {
            money: [
                //這里一定要添加上數據類型是字符串類型的。
                //否者驗證不會通過
                { required: true, message: '請輸入', trigger: 'blur' ,type:'string'},
            ]
        }
        let formState=reactive({
            money:''
        })

        function onSubmit(){
            console.log(formState);
        }

        function resetForm(){
            console.log(formState);
        }
       
        return {
            rules,
           formState,
           onSubmit,
           resetForm
        }
    }
}
</script>