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

Incorrect type on FormOptions.initialValues? #4195

Closed
hanzelkatomas opened this issue Mar 21, 2023 · 2 comments
Closed

Incorrect type on FormOptions.initialValues? #4195

hanzelkatomas opened this issue Mar 21, 2023 · 2 comments
Labels
👕 TypeScript TypeScript typings issue

Comments

@hanzelkatomas
Copy link

hanzelkatomas commented Mar 21, 2023

Hi,
I currently use Vee-validate 4.7.3 with Vue 3.
I have ran into problem with types.

<template>
  <form>
    <text-input name="name" label="Name" />
    <text-input name="surname" label="Surname" />
  </form>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import TextInput from "../../../../components/common/form/TextInput.vue"
import { useForm } from "vee-validate"

type Form = {
  name: string
  surname: string
  age: number
}

export default defineComponent({
  components: { TextInput },
  setup() {
    const { values } = useForm<Form>({
      initialValues: {
        name: "",
        surname: "",
      },
    })
    return {
    }
  },
})
</script>

Here an example of simple form with 3 field. Two of them are string (name, surname) and one is number ( age). I've created a type for this simple form, where every property of type is required. That's because I assume that every field of this form will be filled and eventually POST to server or whatever.
I want to set some default values to this form. For example I want to set name, because I know it and I want to show it as default value in form. I don't know age or surname.
But VeeValidate won't me let set only some of the props and I need to set surname as empty string and age as 0. But I don't want to to be age zero and I can't made age as optional property because, It is required field in form, which will be send to server or whatever.

This is simple example, in reality we have kind of complicated multi step form, where I do certain operations on each step of the form with values, so I can't really change type of the form to Partial<Form>, because I need to know which props are optional and which are required.

Describe the solution you'd like

So shouldn't be property initialValues be typed as MaybeRef<Partial<TValues>> instead of MaybeRef<TValues>. Because not everytime I want to set every property of form as default value, but everytime I need to know, which properties are required/optional.

Describe alternatives you've considered

Pass Partial as generic param to useForm, but this doesn't fit my needs.

@logaretm logaretm added the 👕 TypeScript TypeScript typings issue label Mar 21, 2023
@logaretm
Copy link
Owner

Thanks for suggesting this, this makes a lot of sense to me. Will be tagged in the next release.

@hanzelkatomas
Copy link
Author

Thanks for suggesting this, this makes a lot of sense to me. Will be tagged in the next release.

Thanks a lot!

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

No branches or pull requests

2 participants