Cannot read $form form field states with TypeScript

[spiffytech]

Describe the bug

I'm using the new forms API, and I get TypeScript errors when I try to access form field states on the $form object.

This code reproduces it. The template is just a copy/paste of some sample code in the Forms docs.

Accessing $form.username produces this error:

Property 'username' does not exist on type '{ register: (field: string, options: any) => any; reset: () => void; valid: boolean; states: Record<string, FormFieldState>; }'

<script setup lang="ts">
import { Form } from '@primevue/forms'
import Button from 'primevue/button'
</script>

<template>
  <Form v-slot="$form" class="flex flex-col gap-4 w-full sm:w-56">
    <div class="flex flex-col gap-1">
      <InputText name="username" type="text" placeholder="Username" fluid />
      <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">
        {{ $form.username.error?.message }}
      </Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
  </Form>
</template>

Reproducer

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-kef9dg?file=src%2FApp.vue

PrimeVue version

4.2.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[jackytank]

I have the same issue

[NutNut17]

I have a similar issues. I just getting started using Forms. After I followed all the steps shown in the documentation, the Fieldset component showed that the initialValues was not bound to $form even that I add it as Form property.

[fgrzesiak]

I have the same issue as well.

[SimonOyaneder]

Same issue here

[carloeusebi]

Same

[Roeselmann]

same!

[Kitketovsky]

I have the same issue, short term solution is to use their FormField component

[AlexMountainBN]

My workaround looks like this:

<Form
    v-slot="$form"
    :resolver="resolver"
    :initialValues="initialValues"
    @submit="onFormSubmit"
    class="flex flex-col gap-4 w-full sm:w-56">
    <div class="flex flex-col gap-1">
      <InputNumber name="amount" fluid />
      <Message
        v-if="
          // @ts-expect-error an issue in primevue leads to compile errors
          $form.amount?.invalid
        "
        severity="error"
        size="small"
        variant="simple"
        >{{
          // @ts-expect-error an issue in primevue leads to compile errors
          $form.amount.error?.message
        }}</Message
      >
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
  </Form>

I think it's better to revert if the issue is solved.

[Quang-Dong]

Same.

[Quang-Dong]

I do this now so TS doesn't catch errors..

<Message
     v-if="($form as any).account?.invalid"
     severity="error"
     size="small"
     variant="simple">
     {{ ($form as any).account.error?.message }}
</Message>