react-hook-form access to validation rules in nested component

user_10727916 0
Viewed 2467

I'd like to access to the validation rules defined in react-hook-form's Resister in the nested component to dynamically display required indicator(*). Is there a way to access from Nested component?

I don't want to repeat by passing as a prop.

<TextBox ref={register({ required: true })} label="Serial No" name="serialNo" />

const TextBox = React.forwardRef(({ label, name }, ref) => (
    <>
        <label htmlFor={name}>
            {label} {***required*** && <span>*</span>}
        </label>
        <input type="text" name={name} id={name} ref={ref} />
    </>
))
react-hook-form reactjs
1 Answers

have a look at https://react-hook-form.com/api#useFormContext

import React from "react";
import { useForm, FormProvider, useFormContext } from "react-hook-form";

export default function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} > // pass all methods into the context
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input name="test" ref={register} />;
}

which allow you to access all hook form methods in the nested component level.

user_4092750
Related