fix(components): [form] reset stale props on dynamic fields by l246804 · Pull Request #23706 · element-plus/element-plus

l246804 · 2026-03-02T02:50:33Z

Please make sure these boxes are checked before submitting your PR, thank you!

Make sure you follow contributing guide English | (中文 | Español | Français).
Make sure you are merging your commits to dev branch.
Add some descriptions and refer to relative issues for your PR.

Summary by CodeRabbit

Release Notes

Bug Fixes
- Prevents duplicate field registration in forms.
- Fixed reset behavior for dynamic fields—resetting individual or all fields now correctly handles fields with changing properties without affecting other fields.
Tests
- Added test coverage for dynamic field reset scenarios.

pull-request-triage · 2026-03-02T02:50:39Z

👋 @l246804, seems like this is your first time contribution to element-plus.
Please make sure that you have read our guidelines and code of conduct before making a contribution.

github-actions · 2026-03-02T02:50:40Z

coderabbitai · 2026-03-02T02:50:54Z

📝 Walkthrough

Walkthrough

This PR fixes inconsistent behavior between Form.resetFields() and FormItem.resetField() when a FormItem's prop is dynamic. Changes include preventing duplicate field entries, updating the removeField signature to accept an optional oldPropString parameter for stale entry cleanup, tracking initial values separately for remounting support, and adding a watcher to re-register fields when their prop changes.

Changes

Cohort / File(s)	Summary
Core Form Field Lifecycle `packages/components/form/src/form.vue`, `packages/components/form/src/form-item.vue`, `packages/components/form/src/types.ts`	Added deduplication logic in `addField`, updated `removeField` signature to handle stale entries during prop changes (via `oldPropString`), introduced `getInitialValue()` method on `FormItemContext`, and added a `propString` watcher in FormItem to re-register fields when props change dynamically.
Tests `packages/components/form/__tests__/form.test.tsx`	Added test case verifying that `resetField()` and `resetFields()` correctly handle dynamic prop switches, ensuring only the active field is reset while preserving initial values for previously active fields.

Sequence Diagram

sequenceDiagram
    actor User
    participant FormItem
    participant Form
    participant InitialValues as Form<br/>InitialValues<br/>Store
    participant Fields as Form<br/>Fields<br/>Array

    User->>FormItem: Change prop<br/>(e.g., "name" → "name2")
    activate FormItem
    FormItem->>FormItem: Detect propString change<br/>via watcher
    
    FormItem->>Form: removeField(context,<br/>oldPropString:"name")
    activate Form
    Form->>InitialValues: Delete stale entry<br/>for "name"
    Form->>Form: Return (no fields removal)
    deactivate Form
    
    FormItem->>FormItem: Re-initialize<br/>initialValue from<br/>current fieldValue
    
    FormItem->>Form: addField(context)
    activate Form
    Form->>Fields: Check for duplicates
    Form->>Fields: Add field if not<br/>already present
    deactivate Form
    deactivate FormItem
    
    User->>Form: Call resetFields()
    activate Form
    Form->>Fields: Iterate fields
    Form->>InitialValues: Lookup "name2"<br/>initial value
    Form->>Form: Reset only active field<br/>("name2")
    deactivate Form

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

fix(components): [form/form-item] initial value and reset func #23597: Makes related changes to Form and FormItem field lifecycle, initial-value tracking, and adjusts the FormContext.removeField signature and FormItem.getInitialValue() API.
feat(components): [form] add setInitialValues and setInitialValue function #23013: Modifies form/form-item initial-value handling lifecycle and updates related FormContext and FormItemContext APIs for initial value management.

Suggested reviewers

btea
kooriookami

Poem

🐰 A rabbit's tale of props that dance,
No duplicates in the field's expanse!
When props do switch, old values stay,
Reset cleanly, the proper way! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description contains only a reference to the linked issue and an unchecked contributor checklist template, with no meaningful implementation details or explanation.	Add a substantive description explaining the problem being fixed, the approach taken, and how dynamic prop changes are now handled correctly.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The code changes successfully address both core objectives: preventing duplicate field entries [23705], handling dynamic prop switches via a watcher [23705], and maintaining consistent reset behavior [23705].
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue `#23705`: form field lifecycle management, dynamic prop handling, initial value tracking, and reset consistency.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title directly and specifically describes the main change: fixing how form reset handles stale properties on dynamic fields, which is the core problem addressed across all modified files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-03-02T02:52:24Z

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus@23706

npm i https://pkg.pr.new/element-plus@23706

yarn add https://pkg.pr.new/[email protected]

commit: 115baa3

l246804 · 2026-03-02T02:52:24Z

@btea @Dsaquel PTAL

最主要的问题可能是 Form 里额外存储的 initialValues 在极端条件下可能与 FormItem 不同步。目前看来仍然需要在 removeField 时来缓存完整的 field 对象来确保重置逻辑一致。

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/components/form/src/utils.ts`:
- Around line 55-57: The current ternary treats a scalar string as a plain
string when skipNormalize is true, causing includes to do substring matches;
change the logic so normalized always uses ensureArray(props) to wrap scalars,
and only apply the array-to-dotstring transformation when skipNormalize is
false. Concretely, update the computation of normalized (referencing normalized,
skipNormalize, ensureArray, isArray, and props) so that when skipNormalize is
true you return ensureArray(props) unchanged, and when false you return
ensureArray(props).map(prop => isArray(prop) ? prop.join('.') : prop).

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 245722b and d9ac40b.

📒 Files selected for processing (2)

packages/components/form/src/form.vue
packages/components/form/src/utils.ts

github-actions · 2026-03-02T02:57:51Z

🧪 Playground Preview: https://element-plus.run/?pr=23706
Please comment the example via this playground if needed.

btea · 2026-03-10T08:04:15Z

This modification seems a bit cumbersome.

Perhaps we can watch for changes in props inside the form-item, pass out the new and old values, delete the cached old value inside the form component, and then re-run the original logic of caching the new field.

l246804 · 2026-03-10T08:10:22Z

This modification seems a bit cumbersome.

Perhaps we can watch for changes in props inside the form-item, pass out the new and old values, delete the cached old value inside the form component, and then re-run the original logic of caching the new field.

现在的改动对原有组件功能影响较小，当然如果有更好的实现方式也欢迎修改 😄

btea · 2026-03-10T08:12:51Z

你能添加一个测试用例吗？晚点我试一下前面提到的方式是否更简单。

l246804 · 2026-03-10T08:14:14Z

好

l246804 · 2026-03-26T08:27:51Z

这个PR还有什么问题吗？

closed element-plus#23705

btea

I personally believe that the current logic is more reasonable.

l246804 · 2026-03-30T08:01:03Z

👍

keeplearning66

Thank you!

github-actions · 2026-03-30T13:35:09Z

@l246804 Thanks for your contribution! ❤️

pull-request-triage Bot assigned l246804 Mar 2, 2026

pull-request-triage Bot added 1st contribution Their very first contribution Needs Review labels Mar 2, 2026

github-actions Bot added the Contribution::Community label Mar 2, 2026

coderabbitai Bot reviewed Mar 2, 2026

View reviewed changes

Comment thread packages/components/form/src/utils.ts Outdated

btea reviewed Mar 16, 2026

View reviewed changes

Comment thread packages/components/form/__tests__/form.test.tsx Outdated

l246804 and others added 4 commits March 29, 2026 16:40

fix(components): resetFields

51054e2

closed element-plus#23705

feat: add tests for resetting dynamic fields in Form component

eb2ad1a

chore: simplify using watch

91d4bcb

test: simplify

595409b

Dsaquel force-pushed the fix/resetFields branch from f31d4ff to 595409b Compare March 29, 2026 16:50

Dsaquel approved these changes Mar 29, 2026

View reviewed changes

Dsaquel changed the title ~~fix(components): resetFields~~ fix(components): [form] reset stale props on dynamic fields Mar 29, 2026

Merge branch 'dev' into fix/resetFields

115baa3

btea approved these changes Mar 30, 2026

View reviewed changes

btea requested review from keeplearning66 and rzzf March 30, 2026 07:22

rzzf reviewed Mar 30, 2026

View reviewed changes

Comment thread packages/components/form/__tests__/form.test.tsx

rzzf approved these changes Mar 30, 2026

View reviewed changes

keeplearning66 approved these changes Mar 30, 2026

View reviewed changes

btea merged commit 6b77955 into element-plus:dev Mar 30, 2026
16 checks passed

element-bot mentioned this pull request Apr 10, 2026

D2M #24022

Merged

3 tasks

coderabbitai Bot mentioned this pull request Jun 6, 2026

feat(components): [form] add form item relations validation #24313

Open

3 tasks

Uh oh!

Conversation

l246804 commented Mar 2, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Release Notes

Uh oh!

pull-request-triage Bot commented Mar 2, 2026

Uh oh!

github-actions Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

l246804 commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

btea commented Mar 10, 2026

Uh oh!

l246804 commented Mar 10, 2026

Uh oh!

btea commented Mar 10, 2026

Uh oh!

l246804 commented Mar 10, 2026

Uh oh!

Uh oh!

l246804 commented Mar 26, 2026

Uh oh!

btea left a comment

Choose a reason for hiding this comment

Uh oh!

l246804 commented Mar 30, 2026

Uh oh!

Uh oh!

keeplearning66 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

l246804 commented Mar 2, 2026 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Mar 2, 2026 •

edited

Loading

coderabbitai Bot commented Mar 2, 2026 •

edited

Loading

pkg-pr-new Bot commented Mar 2, 2026 •

edited

Loading

l246804 commented Mar 2, 2026 •

edited

Loading

github-actions Bot commented Mar 2, 2026 •

edited

Loading