Form: TypeScript doesn't know about the Form function validate

[ataylor32]

Describe the bug

My project relies on server-side validation. I don't know how this is intended to be accomplished with the PrimeVue Forms library. Looking at the documentation, it seems like validation is intended to happen entirely on the client side. That being the case, the way I have accomplished server-side validation feels fairly kludgy. But, setting that aside, the fact remains that I should be able to use formRef.value.validate(); without TypeScript complaining. As it is now, in Visual Studio Code, validate is underlined in red and hovering over it shows this:

Property 'validate' does not exist on type '{ $props: FormProps & VNodeProps & AllowedComponentProps & ComponentCustomProps; $slots: FormSlots; $emit: (e: "submit", event: FormSubmitEvent) => void; }'. ts-plugin(2339)

The code works, it's just that it has a TypeScript error that I need to ignore with a @ts-expect-error comment.

Here is the full code:

<script setup lang="ts">
import { ref, useTemplateRef, watch } from "vue";
import { Form, FormField, type FormSubmitEvent } from "@primevue/forms";

const formRef = useTemplateRef("form");

const status = ref<"idle" | "submitting" | "success" | "communicationError">(
  "idle",
);

const errorsFromServer = ref<Record<string, string[]>>({});

watch(errorsFromServer, () => {
  if (formRef.value) {
    // @ts-expect-error Property 'validate' does not exist on type...
    formRef.value.validate();
  }
});

async function submitHandler(e: FormSubmitEvent) {
  status.value = "submitting";
  errorsFromServer.value = {};

  let response: Response | undefined = undefined;

  try {
    response = await fetch("https://wizard-world-api.herokuapp.com/Feedback", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        entityId: e.values.entityId || "",
        feedbackType: e.values.feedbackType || "",
        feedback: e.values.feedback || "",
      }),
    });
  } catch (e) {} // eslint-disable-line @typescript-eslint/no-unused-vars

  if (response && [200, 400].includes(response.status)) {
    if (response.status === 200) {
      status.value = "success";
    } else {
      const responseBody = await response.json();
      errorsFromServer.value = responseBody.errors;
      status.value = "idle";
    }
  } else {
    status.value = "communicationError";
  }
}

const resolver = ({
  values,
}: {
  values: Record<string, string | undefined>;
}) => {
  return {
    errors: errorsFromServer.value,
    values,
  };
};
</script>

<template>
  <h1>Feedback</h1>

  <Message v-if="status === 'success'" severity="success">
    Feedback submitted successfully!
  </Message>

  <template v-else>
    <Message v-if="status === 'communicationError'" severity="error">
      An unexpected error occurred communicating with the server. Maybe the
      server is down or maybe you are not connected to the Internet.
    </Message>

    <Form
      ref="form"
      :resolver
      :validate-on-value-update="false"
      @submit="submitHandler"
    >
      <FormField v-slot="$field" name="entityId">
        <label for="entityId">Entity ID</label>
        <InputText
          id="entityId"
          type="text"
          aria-describedby="entityId_help"
          required
        />

        <Message
          id="entityId_help"
          size="small"
          severity="secondary"
          variant="simple"
        >
          A valid entity ID is: 3fa85f64-5717-4562-b3fc-2c963f66afa6
        </Message>

        <Message
          v-if="$field.error"
          severity="error"
          size="small"
          variant="simple"
        >
          {{ $field.error }}
        </Message>
      </FormField>

      <FormField v-slot="$field" name="feedbackType">
        <label for="feedbackType">Feedback Type</label>
        <InputText
          id="feedbackType"
          type="text"
          aria-describedby="feedbackType_help"
          required
        />

        <Message
          id="feedbackType_help"
          size="small"
          severity="secondary"
          variant="simple"
        >
          A valid feedback type is: General
        </Message>

        <Message
          v-if="$field.error"
          severity="error"
          size="small"
          variant="simple"
        >
          {{ $field.error }}
        </Message>
      </FormField>

      <FormField v-slot="$field" name="feedback">
        <label for="feedback">Feedback</label>
        <InputText id="feedback" type="text" required />

        <Message
          v-if="$field.error"
          severity="error"
          size="small"
          variant="simple"
        >
          {{ $field.error }}
        </Message>
      </FormField>

      <Button type="submit" label="Submit" :loading="status === 'submitting'" />
    </Form>
  </template>
</template>

Reproducer

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-csnodp

PrimeVue version

4.2.5

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[mertsincan]

Fixed in #7046

[ataylor32]

@mertsincan This is still an issue even with PrimeVue 4.3.1. The error message is slightly different:

Property 'validate' does not exist on type '{ $props: FormProps & VNodeProps & AllowedComponentProps & ComponentCustomProps; $slots: FormSlots; $emit: ((e: "submit", event: FormSubmitEvent) => void) & ((e: "reset", event: FormResetEvent) => void); }'. ts-plugin(2339)