Skip to content

fix(Form): use FormState type to support nullable/custom initial state values #6553

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.

Sign up for GitHub

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

Open
rdjanuar wants to merge 2 commits into
base: v4
Choose a base branch
from
Open

fix(Form): use FormState type to support nullable/custom initial state values #6553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
157f92b
fix(Form): use FormState type to support nullable/custom initial stat…
Jun 4, 2026
68789b5
up
Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/runtime/components/Form.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import type { VNode } from 'vue'
import type { AppConfig } from '@nuxt/schema'
import theme from '#build/ui/form'
import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId, InferInput, InferOutput, FormData } from '../types/form'
import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId, InferInput, InferOutput, FormData, FormState } from '../types/form'
import type { FormHTMLAttributes } from '../types/html'
import type { ComponentConfig } from '../types/tv'

Expand All @@ -13,13 +13,13 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
/** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
schema?: S
/** An object representing the current state of the form. */
state?: N extends false ? Partial<InferInput<S>> : never
state?: N extends false ? FormState<S> : never
/**
* Custom validation function to validate the form state.
* @param state - The current state of the form.
* @returns A promise that resolves to an array of FormError objects, or an array of FormError objects directly.
*/
validate?: (state: Partial<InferInput<S>>) => Promise<FormError[]> | FormError[]
validate?: (state: FormState<S>) => Promise<FormError[]> | FormError[]

/**
* The list of input events that trigger the form validation.
Expand Down
4 changes: 4 additions & 0 deletions src/runtime/types/form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ export type InferOutput<Schema> = Schema extends StandardSchemaV1 ? StandardSche
: Schema extends SuperstructSchema<infer O, any> ? O
: never

export type FormState<S extends FormSchema> = {
[K in keyof InferInput<S>]?: any
}
Comment on lines +37 to +39

@coderabbitai coderabbitai Bot Jun 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy lift

Consider unknown instead of any to preserve minimal type safety.

While any achieves the PR objective of accepting runtime values that differ from schema types (e.g., File | null, number | ""), it completely removes compile-time type checking for field values. Developers lose autocomplete, IntelliSense, and protection against typos or type errors.

Using unknown instead would still allow any runtime value but require explicit type narrowing or assertions before use, providing a safer middle ground.

🔒 Alternative using `unknown` for safer typing 
 export type FormState<S extends FormSchema> = {
-  [K in keyof InferInput<S>]?: any
+  [K in keyof InferInput<S>]?: unknown
 }

Note: This change would require downstream consumers (Form.vue validate callbacks, custom validation functions) to use type assertions or guards when accessing state fields. Evaluate whether the added safety justifies the ergonomic cost.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export type FormState<S extends FormSchema> = {
[K in keyof InferInput<S>]?: any
}
export type FormState<S extends FormSchema> = {
[K in keyof InferInput<S>]?: unknown
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/runtime/types/form.ts` around lines 37 - 39, The FormState type currently
uses `any` which removes compile-time safety; change the value type to `unknown`
in the FormState definition so it reads as {[K in keyof InferInput<S>]?:
unknown} (referencing FormState, FormSchema and InferInput) and then update any
downstream usages (e.g., Form.vue validate callbacks and custom validators) to
perform explicit type narrowing or assertions when reading fields to satisfy the
new constraint.


export type FormData<S extends FormSchema, T extends boolean = true> = T extends true ? InferOutput<S> : InferInput<S>

export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus'
Expand Down
Loading