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

Question

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} />
    </>
))

Bill · Accepted Answer · 2020-11-13 04:42:17Z

4

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.

answered Nov 13, 2020 at 4:42

Bill

19.5k21 gold badges89 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vqoph Over a year ago

That doesn't answer the question, how can we display the "*" indicator for required field ?

dkostreba Over a year ago

Is there a solution to this problem?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related