Skip to content

v4 useForm with validationSchema - TypeScript error #2988

Description

@Mikilll94

Versions

  • vee-validate: 4.0.0-beta.10
  • vue: 3.0.1

Describe the bug
The following form

<template>
  <div>
    <div>
      <Field name="email" as="input" type="email" />
      <div>{{ errors.email }}</div>
    </div>
    <div>
      <Field name="name" as="input" />
      <div>{{ errors.name }}</div>
    </div>
    <div>
      <Field name="password" as="input" type="password" />
      <div>{{ errors.password }}</div>
    </div>

    <pre>Is form dirty: {{ isDirty }}</pre>

    <!-- print form values -->
    <pre>{{ values }}</pre>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { Field, useForm } from "vee-validate";
import * as yup from "yup";

export default defineComponent({
  components: {
    Field,
  },
  setup() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });
    const { meta, values, errors } = useForm({
      validationSchema: schema,
    });

    const isDirty = computed(() => meta.value.dirty);

    return {
      errors,
      values,
      isDirty,
    };
  },
});
</script>

produces a TypeScript error:

ERROR in src/App.vue:39:7
TS2322: Type 'ObjectSchema<Shape<object | undefined, { email: string; name: string; password: string; }>, object>' is not assignable to type 'Record<string, string | Record<string, any> | GenericValidateFunction>'.
  Index signature is missing in type 'ObjectSchema<Shape<object | undefined, { email: string; name: string; password: string; }>, object>'.
    37 |     });
    38 |     const { meta, values, errors } = useForm({
  > 39 |       validationSchema: schema,
       |       ^^^^^^^^^^^^^^^^
    40 |     });
    41 | 
    42 |     const isDirty = computed(() => meta.value.dirty);

To reproduce
Steps to reproduce the behavior:

  1. Run this project (npm install then npm run serve):
    vee-validate-v4.zip

  2. TypeScript error pops up.

Expected behavior
There should be no TypeScript error.

Desktop (please complete the following information):

  • OS: macOS Catalina
  • Browser Chrome
  • Version 86.0.4240.80

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions