FormFieldState Interface Doesn't Support Nested Form Fields in TypeScript #7512
Description
Describe the bug
When using nested form fields with PrimeVue forms (like billing_info.clinic), TypeScript correctly validates the form but raises type errors when accessing nested validation state through $form.billing_info.clinic.
The current FormFieldState interface doesn't account for nested objects containing additional FormFieldState properties.
It gives me this error:
TypeScript error: `Property 'clinic' does not exist on type 'FormFieldState'`
Proposed Solution
Add an index signature to the FormFieldState interface to support nested fields:
export interface FormFieldState {
// ... existing properties
/**
* Support for nested form fields
*/
[key: string]: FormFieldState | any;
}Pull Request Link
No response
Reason for not contributing a PR
- Lack of time
- Unsure how to implement the fix/feature
- Difficulty understanding the codebase
- Other
Other Reason
No response
Reproducer
Environment
Brand new nuxt project
Vue version
3.5.13
PrimeVue version
4.3.2
Node version
20.9.0
Browser(s)
No response
Steps to reproduce the behavior
- Create a Form with nested fields like this:
z.object({
billing_info: z.object({
clinic: z.string()
})
})
- Try accessing validation in template: $form.billing_info.clinic.invalid. You will get the typescript error but everything else will still work.
Expected behavior
TypeScript should recognize nested form validation states as valid.