vbenjs / vue-vben-admin

A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast!

Home Page:https://vben.vvbin.cn/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hidden form fields incorrectly included in validation after conditional visibility changes using ifShow

doraemonxxx opened this issue · comments

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

  • Read the docs.
  • Make sure the code is up to date. (Some bugs have been fixed in the latest code)
  • This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

Scenario 1

Step Action ifShow Value Expected Behavior
1 Field "user" (select component) is hidden false Field is hidden.
2 Click "submit" on the form false Field is not shown in validate() method.

Scenario 2

Step Action ifShow Value Expected Behavior
1 Field "user" (select component) is hidden false Field is hidden.
2 Click "submit" on the form false Field is not shown in validate() method.
3 Click a button to show the "user" field true Field is now visible.
4 Select/choose a value in the "user" field true Value is inputted in the "user" field.
5 Click the button again to hide the "user" field false Field is hidden again.
6 Click "submit" on the form false Field is incorrectly shown in validate() method. (Expected: Field should not be shown in validate() method since ifShow is false.)

Explanation:

  • Scenario 1: The field "user" is hidden (ifShow is false). When the form is submitted, the field does not appear in the validate() method, which is the expected behavior.

  • Scenario 2: Initially, the field "user" is hidden (ifShow is false). When the form is submitted, the field does not appear in the validate() method. Then, a button is clicked to show the "user" field (ifShow is true), and a value is selected. After selecting a value, the field is hidden again (ifShow is false). When the form is submitted, the field should not appear in the validate() method since ifShow is false. However, it incorrectly appears in the validation, which is not the correct behavior.

System Info

  • Operating System: 11
  • Node version: 20.11.0
  • pnpm version: 9.0.6

Reference: #3836

Another scenario

Step Action ifShow Value Expected Behavior
1 Field user is hidden Hidden Field with Default Value User field is hidden with default value
2 Click "submit" (validate()) Hidden Field with Default Value Validate method should not consider ifShow is hidden

In this scenario, the "User" field is initially hidden with the condition ifShow being false. Despite being hidden, it still retains its default value.