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

v4 useForm with validationSchema - TypeScript error #2988

Closed
Mikilll94 opened this issue Oct 18, 2020 · 1 comment
Closed

v4 useForm with validationSchema - TypeScript error #2988

Mikilll94 opened this issue Oct 18, 2020 · 1 comment

Comments

@Mikilll94
Copy link

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
@logaretm
Copy link
Owner

Thank you for reporting this, I missed adding the ObjectSchema type, tagged in beta.11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants