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

Bug: 在使用useForm时对于校验失败的antdv 的Select组件的样式问题 #5815

Closed
5 tasks done
dongivan opened this issue Mar 30, 2025 · 1 comment
Closed
5 tasks done

Comments

@dongivan
Copy link

dongivan commented Mar 30, 2025

Version

Vben Admin V5

Describe the bug?

在使用useForm的时候,如果schema的一个field的component是自定义的,而且这个component中包含多个antdv的Select组件的话,那么当这个field校验失败时,所有的Select的边框都会变红。

Reproduction

Image
如图

猜测原因是:
form-field.vue#L292在校验失败时增加了.form-valid-error,而这个样式导致antd/index.css#L68生效,导致该field下所有的Select组件都被设置。

另外想请教一下,对于这种复杂结构(field的内容是Array,每个元素是一个对象),应该怎么写才能让校验结果的显示效果与Vben的Form是一致的?

System Info

-

Relevant log output

-

Validations

@mynetfan
Copy link
Collaborator

mynetfan commented Apr 8, 2025

对这个自定义组件内已校验通过的Select添加.valid-success类。

<div class="form-valid-error">
    <select class="valid-success" />
    <select />
</div>

以上结构中,校验失败的样式只会应用在第二个select上

@mynetfan mynetfan closed this as completed Apr 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants