useForm with Different Input/Submit Types Not Working as Expected

Please have a look at it https://github.com/refinedev/refine/issues/6797

GitHub

useForm with Different Input/Submit Types Not Working as Expected ...

useForm with Different Input/Submit Types Not Working as Expected Description I'm using useForm<BookDto, HttpError, UpdateBookRequest>() in edit mode and facing broken behavior when tryin...

2 Replies

kapa.ai•7d ago

Hi @lont. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'll look into the issue you're referring to about useForm with different input/submit types. Based on the knowledge sources provided, I can see that there are several related issues with the useForm hook in refine, particularly when dealing with different types for form input and API submission. The core issue appears to be that when using useForm from @refinedev/react-hook-form, there can be type mismatches between: 1. The form structure that users interact with 2. The data structure that needs to be sent to the API In the GitHub issue #6137, a user described a similar problem where they needed to transform form data before submission, but encountered type errors because the same type was enforced for both the form values and the onFinish function argument. For example, if you have a form with fields structured differently from your API model:

interface User {
  email: string;
  user_metadata: {
    display_name: string;
  };
}

interface FormProps {
  email: string;
  userName: string;
}

// This causes type errors when transforming data
const { refineCore: { onFinish }, reset, handleSubmit } = 
  useForm<User, HttpError, FormProps>();

// When trying to submit, you get type errors
const handleSubmitInner = (formProps: FormProps) => {
  onFinish({
    email: formProps.email,
    // Type error here because onFinish expects FormProps
    user_metadata: {
      display_name: formProps.userName,
    },
  });
};

interface User {
  email: string;
  user_metadata: {
    display_name: string;
  };
}

interface FormProps {
  email: string;
  userName: string;
}

// This causes type errors when transforming data
const { refineCore: { onFinish }, reset, handleSubmit } = 
  useForm<User, HttpError, FormProps>();

// When trying to submit, you get type errors
const handleSubmitInner = (formProps: FormProps) => {
  onFinish({
    email: formProps.email,
    // Type error here because onFinish expects FormProps
    user_metadata: {
      display_name: formProps.userName,
    },
  });
};

A refine team member acknowledged this issue and suggested that the useForm hook could benefit from a 4th generic type parameter to separately specify the form structure and the submission structure. As a workaround, you could: 1. Use type casting when calling onFinish 2. Create a union type that satisfies both the form and API structures 3. For @refinedev/react-hook-form, you might need to use the refineCoreProps property for certain configurations, as mentioned in this GitHub issue The refine team appears to be aware of this limitation and may be working on improving the type system for the useForm hook to better handle these transformation scenarios. Would you like me to provide more specific guidance based on which version of useForm you're using (from @refinedev/core or @refinedev/react-hook-form)? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@458986469038620673> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

useForm with Different Input/Submit Types Not Working as Expected

Did you find this page helpful?