Runnable examples

Four live scenarios run on this page against real Element Plus controls, in the order an integration usually meets them. Start at 01 and work down — each scenario owns a separate form instance, so edit, submit, and reset freely.

Live scenarios · 4Recommended order 01 → 04

1. 01#dialog-crud↓Dialog CRUD Start hereOne form instance runs create, edit, and detail behind a dialog.Verifyload(mode)dirtychangedPathsread-only detail
2. 02#conditional-linkage↓Conditional + linkage Visibility, active-only rules, and province→city resets stay in plain TypeScript.Verifywhenconditional ruleslinkage
3. 03#zod-list↓Dynamic array + Zod Member rows keep stable keys; submit returns schema-parsed data.Verifyform.list()fieldPath()parsed output
4. 04#save-error-scroll↓Save-error navigation Saving a long form scrolls directly to its first invalid field.Verifysubmit()scrollToErrorhost field scroll

Each scenario owns its form instance — state never leaks between them. Prefer one compact form? The home page runs a single live instance. Open the home demo →

01Dialog CRUDSource ↗

Dialog CRUD: one instance across create, edit, and detail

The list owns no form. Opening the dialog calls form.load(); create and edit keep Element Plus Form while detail switches to read-only Descriptions.

1. 01New task → save with an empty title and read the host errors.
2. 02Edit a row, change any field — dirty and changedPaths update.
3. 03Save and check the state panel for the last-saved record.
4. 04Open Details → the form becomes read-only Descriptions.

ExpectDetail mode offers no save action and its submit is rejected.

2 records

Runtime state

modecreate

dirtyfalse

changedPaths[]

Last saved—

Key APIform.load(mode, values?)form.editableform.dirtyform.changedPaths

02Conditional + linkageSource ↗

Conditional fields and linkage stay in plain TypeScript

when controls visibility, conditional rules validate only active fields, and linkage clears the city when its province changes.

1. 01Toggle Need invoice — the title field and its required rule appear together.
2. 02Switch payment method — the account field and its rules swap.
3. 03Pick a province, then change it — the city resets and its error clears.
4. 04Submit empty, then valid — compare errors with the parsed result.

ExpectOnly active fields validate, and only they reach the submit payload.

Need invoice

Payment method

BankAlipay

Bank account

Province

Choose a province

Runtime state

activeFields["bankAccount"]

dirtyfalse

changedPaths[]

Submit result—

Key APIwhenconditional ruleslinkageform.hidden()

03Dynamic array + ZodSource ↗

Dynamic arrays and Zod: stable row keys, parsed output

form.list() owns dynamic member rows, fieldPath() creates host props, and Zod validates array length and nested fields before returning trimmed submit data.

1. 01Submit empty — project and member errors appear, scroll lands on the first.
2. 02Remove the only member — the array-level min(1) error fires.
3. 03Add a member, pad the name with spaces — output returns it trimmed.

ExpectThe output panel prints schema-parsed JSON, not the raw model.

Project

01

Member 1 · Name

Role

Runtime state

members1

submittingfalse

Parsed outputZod 4

{
  "status": "waiting"
}

Key APIuseZodForm({ schema })form.list('members')fieldPath()form.submit()

04Save-error navigationSource ↗

Save, then scroll to the first invalid field automatically

The action stays visible while a required field sits below the long form fold. Failed submit scrolls automatically through the host form.

1. 01Leave the form viewport at the top; Approval reason is empty below the fold.
2. 02Click Save without searching for the missing field.
3. 03The form scrolls to the target and renders its inline error.
4. 04Fill Approval reason and save again to confirm success.

ExpectOnly the form workbench scrolls while the Save action stays put; target and errors update in the state panel.

The required target is below this viewport

Request ID

Requester

Team

Service

Environment

Change window

Rollback plan

Approval reason

No manual field search — save directly.

Scroll state

scrollTop0px

targetPath—

errors{}

ResultReady to save

Key APIform.submit()scrollToError: trueadapter.scrollToField()

Repository playgrounds

Four playgrounds exercise the same contracts against real UI libraries. Boot the one closest to your stack, then walk the evaluation path.

Evaluation pathBoot any playground, then walk these five checks in order:

1. 01Submit an empty form and inspect host errors.
2. 02Load edit data, change a value, inspect dirty and changedPaths.
3. 03Reset and confirm the loaded record returns.
4. 04Apply API errors with setErrors(), then edit the failing field.
5. 05Switch to detail and confirm submit is rejected.

StackRunCoversSource

• Element Plus · Vue 3pnpm dev:vue3Basic forms, CRUD dialog + page, conditional fields, cross-field rules, dynamic arrays, Zod, custom adapter.Source ↗
• element-ui · Vue 2.7pnpm dev:vue2Same create / edit / detail / reset / submit lifecycle on the legacy stack.Source ↗
• Naive UI · Vue 3pnpm dev:naive@vformjs/naive-ui — useNaiveForm, dialog modes, host validation, Zod.Source ↗
• Ant Design Vue · Vue 3pnpm dev:antd@vformjs/ant-design-vue — partial validation, scrolling, dialog modes, Zod.Source ↗

Feedback

Questions and integration results go to the repository:

• GitHub Discussions — usage questions and show-and-tell
• Integration-feedback issue — what worked or blocked adoption