Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Sep 11, 2025

This PR fixes an issue where setting requiredMark=true on a Form component would show the asterisk (*) on ALL form items, including those without required validation rules.

Plan:

  • Understand the issue: When requiredMark=true, all form items show * regardless of required rules
  • Analyze the current logic in form-item.tsx line 77-81
  • Fix the logic to only show * when field is actually required AND requiredMark is not explicitly false
  • Create test case to verify the fix works
  • Verify existing tests still pass
  • Test the fix manually with comprehensive logic verification
  • Respond to design feedback about API association

Changes Made:

  • Updated needRequiredMark computed property in form-item.tsx to use requiredMark !== false && isRequired instead of requiredMark ?? isRequired
  • Added comprehensive test cases in required-mark.test.tsx
  • Added demo example in required-mark-test.vue for manual verification

Design Decision Confirmed:

After feedback review, confirmed that requiredMark should be strongly associated with the required API for better UX:

  • Intuitive behavior - asterisks only appear on fields that actually need validation
  • Prevents user confusion - no misleading visual cues on optional fields
  • Addresses core issue - users want marks only on truly required fields
  • Aligns with documentation - existing docs already indicate required rules should "默认显示必填标记"

API Behavior:

  • requiredMark=true → "show marks on required fields" ✅
  • requiredMark=false → "never show marks" ✅
  • requiredMark=undefined → "auto-detect from validation rules" ✅

Verification Results:

Logic verification confirms the fix addresses the exact issue:

  • Main issue: requiredMark=true + field has NO required rules → Fixed from showing * to NOT showing *
  • All other scenarios remain unchanged and work correctly

Design philosophy established:

  • Strong association between requiredMark and required validation rules
  • Visual consistency with actual form behavior
  • Follows common form library UX patterns

Root cause:

The previous logic return requiredMark ?? isRequired; would return true when requiredMark was explicitly true, regardless of whether the field actually had required validation rules.

Fix:

Changed to return requiredMark !== false && isRequired; to ensure asterisk only appears on fields that are actually required (have required validation rules), while still respecting the requiredMark=false override.

This maintains flexibility while ensuring visual consistency with actual validation behavior, following standard form UX patterns.

Fixes #5983.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copy link
Contributor Author

Copilot AI commented Sep 11, 2025

@uyarn 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

@tdesign-bot
Copy link
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-vue-next 完成
@tdesign-vue-next/chat 完成

@pkg-pr-new
Copy link

pkg-pr-new bot commented Sep 11, 2025

tdesign-vue-next-demo

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/auto-import-resolver@5994
npm i https://pkg.pr.new/Tencent/tdesign-vue-next@5994
npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/chat@5994

commit: 99a7974

@uyarn
Copy link
Collaborator

uyarn commented Sep 11, 2025

@copilot Do you think the requiredMark API should be strongly associated with the required API?

@uyarn uyarn marked this pull request as ready for review September 11, 2025 11:03
Copilot finished work on behalf of uyarn September 11, 2025 11:10
Copy link
Contributor Author

Copilot AI commented Sep 11, 2025

@copilot Do you think the requiredMark API should be strongly associated with the required API?

Yes, I believe the requiredMark API should be strongly associated with the required API for several reasons:

1. Documentation Alignment
The existing docs already indicate this intent: validation rules with required: true "默认显示必填标记" (show required mark by default). This suggests the original design intended this association.

2. User Experience Consistency

  • Visual accuracy: Asterisks should only appear on fields that actually require validation
  • Prevents confusion: Users won't be misled by visual cues that don't match behavior
  • Intuitive API: requiredMark=true meaning "show marks on required fields" is more logical than "show marks on all fields"

3. Common Form Library Patterns
Most form libraries (Ant Design, Element UI, etc.) tie visual required indicators to actual validation rules rather than treating them as independent display flags.

4. Addresses Core Issue
The reported issue (#5983) specifically complained that requiredMark=true showed asterisks on ALL items regardless of validation. This strong association fixes that confusion.

API Behavior with Strong Association:

  • requiredMark=true → "show marks on required fields" ✅
  • requiredMark=false → "never show marks" (override) ✅
  • requiredMark=undefined → "auto-detect from validation rules" ✅

This maintains flexibility while ensuring visual consistency with actual validation behavior, following standard form UX patterns.

Changes in commit 99a7974

Copilot finished work on behalf of uyarn September 11, 2025 11:16
@uyarn uyarn closed this Sep 22, 2025
@uyarn uyarn deleted the copilot/fix-5983 branch September 23, 2025 03:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Form] requiredMark 属性设置为true 的话,所有的item 都会出现 ‘‘*’’ 号

3 participants