quickest-silver•9mo ago

Reuse Create Form

I am trying to create a form component called UserForm that's rendered by both StudentCreate and TeacherCreate components. Some input values are successfully submitted to the backend, but some inputs are not getting submitted. Possible problem: For the inputs that are not getting submitted, it might be because of the control return prop from useForm. I am calling useForm from in both child and parent component, causing a disconnect. What I tried: I tried to get the control prop in the parent component(StudentCreate) and then pass it down to the child component(UserForm) but control is supposed to be an instance of Control class and it's being passed as a regular pojo object, so I can't use the methods in control. So I'm not sure what to do next, really looking forward to your answer! Code for parent component is below, code for child(UserForm) is attached. The fields that do not submit (but show up in form ui) are classes, time_zone, class_format, start_date, and end_date Code for StudentCreate (Parent component that renders UserForm):

export const StudentCreate: React.FC<IResourceComponentsProps> = () => {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    setValue,
    formState: { errors },
  } = useForm();

  // const classesData = useFetchClasses();
  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <UserForm
        role="Student"
        prefix="s"
        register={register}
        setValue={setValue}
        errors={errors}
      />
    </Create>

export const StudentCreate: React.FC<IResourceComponentsProps> = () => {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    setValue,
    formState: { errors },
  } = useForm();

  // const classesData = useFetchClasses();
  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <UserForm
        role="Student"
        prefix="s"
        register={register}
        setValue={setValue}
        errors={errors}
      />
    </Create>

message.txt

3 Replies

kapa.ai•9mo ago

Hi @soto76. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, based on the information provided, it seems like you might be having issues with the useForm hook and the control prop. In refine, useForm is a hook used to manage forms. It returns the necessary properties and methods to control the form. The control prop is used to control the form's state and actions. Here's a basic usage of the useForm hook from the refine blog:

const {  
 control,  
 handleSubmit,  
 watch,  
 formState: { errors },  
} = useForm({  
 mode: "onChange",  
 defaultValues,  
});

const {  
 control,  
 handleSubmit,  
 watch,  
 formState: { errors },  
} = useForm({  
 mode: "onChange",  
 defaultValues,  
});

You should ensure that the form instance returned by useForm is connected to your Form element. If you're using a library like Ant Design, you would typically pass the form instance as a prop to the Form component. For more information, you can refer to the refine documentation (https://refine.dev/docs) and blogs (https://refine.dev/blog). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@934748406096736296> kapa.ai is still learning and improving, please let us know how it did by reacting below

quickest-silver•9mo ago

Turns out you can pass control down to the child. I just had the wrong type. I had control as an object type, instead it should be Control https://react-hook-form.com/ts#Control

Performant, flexible and extensible forms with easy-to-use validation.