react-hook-form doesn't work validation with custom input

Question

when I just use <input {...register(name)} />, validation works correctly: empty required-fields give an error, when filled out, the error disappears. But if this input is moved to a separate component, does the error disappear when filled in?

Code:

parent:

<InputField
    validationType="underlineText"
    invalidText={errors?.[name]?.message}
    invalid={Boolean(errors?.[name]?.message)}
    {...register(name)}
/>

InputField.tsx:

export const InputField = memo(({
  invalid,
  invalidText,
  validationType,
  ...otherProps
}: IInputProps) => (
  <InputValidationWrapper
    invalid={invalid}
    invalidText={invalidText}
    validationType={validationType}
  >
    <input
      {...otherProps}
    />
  </InputValidationWrapper>
))

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Carlos Spohr
– Carlos Spohr, Commented May 25, 2022 at 12:03

Saeed Shamloo · Accepted Answer · 2022-05-25 17:54:45Z

1

Since react-hook-for works with the ref of element, You need to wrap your custom component with React.forwardRef, like this:

const InputFieldRef = forwardRef(
  ({ invalid, invalidText, validationType, ...otherProps }, ref) => {
    return (
      <InputValidationWrapper
        invalid={invalid}
        invalidText={invalidText}
        validationType={validationType}
      >
        <input {...otherProps} ref={ref} />
      </InputValidationWrapper>
    );
  }
);

export const InputField = memo(InputFieldRef);

and here is example of using above component:

<InputField
        validationType="underlineText"
        invalidText={errors?.[name]?.message}
        invalid={Boolean(errors?.[name]?.message)}
        {...register(name, { required: "Field is Required" })}
/>

answered May 25, 2022 at 17:54

Saeed Shamloo

6,6021 gold badge11 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

react-hook-form doesn't work validation with custom input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related