What is the best practice to submit a form the parent component?

[sunnyone]

I often put a form in a dialog with an OK button. If I can put a useForm on top of the dialog, it's fine, but it's not practical to call useForm in the dialog itself since I want to display the form after the dialog is displayed and the data fetched.

I want to submit the form from the callback of the parent dialog, but how would it be more elegant to submit it?
Using imperativeRef?

const MyForm: React.FC<{defaultValues: any}> = ({defaultValues}) => {
    const {register} = useForm({defaultValues});

    return <form>
        <input name="name1" ref={register} />
    </form>;
}

export const MyDialog: React.FC = () => {
    const {isLoading, data} = useMyFormInitialDataQuery();

    return <Dialog onOk={howToSubmitFormElegantly()}> {/* here! */}
       {isLoading && <Spinner />}
       {!isLoading && <MyForm defaultValues={data} />}
    </Dialog>;
}

[bluebill1049]

useForm probably should be at the parent level, and then you can pass down props to your child.

[sunnyone]

Thanks. But data is not prepared at the first useForm call, so the form on the parent requires reset(). It would be nice if there was an option for defaultValues to automatically reset.

  const { isLoading, data } = useQuery<FormValues>("initial-data", async () => {
    await delay(1000);
    return { name1: new Date().toISOString() };
  });

  const { getValues, register, reset } = useForm<FormValues>({
    defaultValues: data // data is undefined at first
  });
  // It's happy if this is not nesessary with an option
  useEffect(() => {
    reset(data);
  }, [reset, data]);

https://codesandbox.io/s/peaceful-bird-ft95o?file=/src/App.tsx

[bluebill1049]

yea, that's the thing defaultValues is just as the same as <input defaultValue /> it's only for the initial and first render.

[wutzebaer]

Hi in my useForm() call i also pass validation resolver: yupResolver(schema) i dont want to define the validation schema in the parent object, any ideas?