Skip to content
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.

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

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

Open
ataylor32 opened this issue Dec 20, 2024 · 0 comments
Open

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

ataylor32 opened this issue Dec 20, 2024 · 0 comments
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Milestone

Comments

@ataylor32
Copy link

ataylor32 commented Dec 20, 2024

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

@ataylor32 ataylor32 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 20, 2024
@tugcekucukoglu tugcekucukoglu added Status: Pending Review Issue or pull request is being reviewed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 20, 2024
@tugcekucukoglu tugcekucukoglu added this to the 4.3.0 milestone Dec 20, 2024
@github-project-automation github-project-automation bot moved this to Review in PrimeVue Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
Status: Review
Development

No branches or pull requests

2 participants