Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NInputNumber 数字输入框如果加上精度后,表单校验不会自动校验 #6622

Open
5 tasks done
OnlyTL opened this issue Dec 16, 2024 · 2 comments
Open
5 tasks done
Labels
untriaged need to sort

Comments

@OnlyTL
Copy link

OnlyTL commented Dec 16, 2024

Describe the bug

数字输入组件,如果添加上精度属性后,输入内容后,表单校验为空不会自动取消,需要点击其他地方才会触发。但是不添加精度属性,完全正常,当输入后非空校验自动消失。

<script setup>
import {NForm,NFormItem,NInputNumber} from 'naive-ui'
import {ref} from "vue";

const form = ref({
  area: undefined,
  number: undefined
})
const formRef = ref()
const rules = {
  area: { required: true, trigger: ['blur', 'input'], message: '请输入总面积', type: 'number' },
  number: { required: true, trigger: ['blur', 'input'], message: '请输入总人数', type: 'number' },
}
</script>

<template>
  <div class="box">
    <n-form ref="formRef" :model="form" :rules="rules">
      <n-form-item label="Area" path="area">
        <n-input-number v-model:value="form.area" :max="999999" />
      </n-form-item>
      <n-form-item label="Number" path="number">
        <n-input-number v-model:value="form.number" :max="999999.99" :precision="2" />
      </n-form-item>
    </n-form>
  </div>
</template>

Steps to reproduce

按照描述中代码执行即可复现
动画

Link to minimal reproduction

https://github.com/OnlyTL/naive-ui-demo

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 2.07 GB / 15.88 GB
  Binaries:
    Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.70)
    Internet Explorer: 11.0.26100.1882

Used Package Manager

npm

Validations

@OnlyTL OnlyTL added the untriaged need to sort label Dec 16, 2024
@Zheng-Changfu
Copy link
Collaborator

文档中有提到,设置了精度值后会禁用 update-value-on-input(在输入的过程中,在输入值合法的情况下,是否改变值)

@OnlyTL
Copy link
Author

OnlyTL commented Dec 19, 2024

文档中有提到,设置了精度值后会禁用 update-value-on-input(在输入的过程中,在输入值合法的情况下,是否改变值)

那这种情况是不是只能自己写逻辑去控制了,有没有推荐的解决方案

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
untriaged need to sort
Projects
None yet
Development

No branches or pull requests

2 participants