react-hook-form / error-message Goto Github PK

Hello,

I just saw that the package react-hook-form is being imported here. I haven't yet tried out myself but now I'm wondering if this package (error-message) is not IE11 compatible. If so, would it be possible to make it IE11 compatible by using the IE11 version of react-hook-form somehow?

Thanks in advance.

As seen in #87 (comment), as does not take precedence over render if the value provided to it is a component rather than an element.

The snapshot generated in #87 is not correct, and should be fixed.

Hi. First of all thanks for a great library which react-hook-form is.

I tried to use ErrorMessage component in combination with styled-components. For the record I'm using TypeScript. Sadly, both apis - your component and styled method - accept as prop. So when I do

const StyledErrorMessage = styled(ErrorMessage)`
  color: #f76479;
  font-size: 10px;
`;

<StyledErrorMessage errors={errors} name="avatarUrl"  as="span" />

Typescript goes nuts and error is shown

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Assign<{ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 160 more ... | undefined; errors?: DeepMap<...> | undefined; name: string; message?: string | undefined; render?: ((data: { ...; }) => ReactNode) | undefined; }, any>, string | ... 1 more ... | symbol> & Partial<...>, string | ... 1 more ... | symbol> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'string' is not assignable to type 'undefined'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"span", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"span", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ errors: DeepMap<Record<string, any>, FieldError>; name: string; as: "span"; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Property 'errors' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.  TS2769

    52 |             Avatar URL
    53 |             <Input name="avatarUrl" ref={register({ required: 'Avatar URL is required' })} />
  > 54 |             <StyledErrorMessage errors={errors} name="avatarUrl" as="span" />
       |             ^
    55 |           </Label>
    56 |         </FormControl>
    57 |         <FormControl>

I tried to do

const StyledErrorMessage = styled(ErrorMessage).attrs({ as: 'span' })`
  color: #f76479;
  font-size: 10px;
`;

but styled-components treat this as prop as its own. Span is rendered but message is not shown as you might expect because ErrorMessage component is replaced with span tag by styled-components.

To be honest I'm not sure it's really a bug. Just two libraries exposing similar api 😄
I thought you should know about as styled-components are pretty popular.

The component doesn't support new root.* error type, eg name="root.serverError"

Type '"root.serverError"' is not assignable to type FormData

It appears that

<input name="coordinate.northing" ref={register} />
<ErrorMessage errors={errors} name="coordinate.northing" />

does not function properly. Is this known/expected?

I noticed this test

But I don't see the same result.

Maybe this is an issue for the main repo since the errors object sent to this component contains

{
 northing: {message: '', type: ''}
}

updating the error message to

<ErrorMessage errors={errors} name="northing" as={ErrorMessageTag} />

does work but that is confusing and can lead to non-unique keys.

update

I messed up. the errors object is coming from my yup resolver schema so once I linked everything up it does work as expected.

When I update react hook form version from 5.0.3 to 6.0.4, I faced this error
ErrorMessage component not exported from 'react-hook-form'
after installing npm install @hookform/error-message

and edit the imports to
import { ErrorMessage } from '@hookform/error-message';
I faced this error
Unable to resolve path to module '@hookform/error-message'

Add LICENSE file to this repo

Hi there 👋

I'm upgrading from react-hook-form v5 to v6 following migration guide, and I think that I have found a possible issue with as and render props.

In v5, when render prop was children, if both are present, both was applied (as as wrapper component and children for rendering message. Here is a CodeSandbox (forked from v5 docs) that demostrates that it works like a charm:

But now, in v6, after moving children to render, it seems that render and as are mutually exclusive. If as prop is present, render prop won't be applied. Here is another CodeSandbox (forked from v6 docs) that should work like in the other but sadly not:

Is this an expected behaviour or an issue?

Thanks a lot, you are really awesome 🎉

I've been using ErrorMessage with no issues on NextJS client-rendered pages. Based on the documentation, I haven't been passing the errors object to the ErrorMessage component since I'm using a FormProvider.

However, I just tried to use an ErrorMessage in a form on a NextJS statically exported page and it throws an error that says TypeError: Cannot read properties of null (reading 'formState').

After looking through the issues here and reading #52, I tried fetching the errors object inside my component using useFormContext, and passing this to the ErrorMessage. It seems to have resolved the issue.

This workaround works for me, but I wanted to see if this is expected behavior when exporting a static page.

Versions:
NextJS v12.1.0
React-Hook-Form v7.27.1
@hookform/error-message v2.0.0

Would be cool if you could add a className parameter, which automatically generates a div with the desired classname...!

the error dont appear in error message
not sure if this is an issue but cant figure out an other way

const { fields } = useFieldArray({
    name: nameForm,
    ...methods.control
  });

fields.map((field: FieldValues, index: number) => {
            const id = '${nameForm}.${index}.checkbox'

            return (
                <input
                  {...methods.register(id, { required: required })}
                />
              </div>
            );
          })

<ErrorMessage
        errors={errors}
        name={nameForm}
        render={({ message }) => {
          return <div className="text-red-500 text-sm">{message}</div>
        }}
      />

Hi,

just found in ErrorMessagethere exists a get method for digging into objects especially errors and retrieve nested values, is there any plan to document this in the API docs?

import * as React from 'react';
import { useFormContext, get, FieldErrors } from 'react-hook-form';
import { Props } from './types';

can be used like

 const error = get(errors || methods.formState.errors, name);

This is useful when handling complex nested forms, right now documentation does not expose all the power of react hooks forms utils.
My favorite forms library by far...
Thanks in advance,

So I have something like:

// ...
import { ErrorMessage } from '@hookform/error-message';

function MyComponent() {
  const {
          formState: { errors },
          trigger,
      } = useFormContext();
  
  const acceptChanges = async function () {
          const valid = await trigger();
          if (valid) {
              await submit?.();
          }
      };
  
  console.log({ errors });
  
  return (
    <>
      {/* .... */}
      <Button onClick={acceptChanges}>{t('Save')}</Button>
      <ErrorMessage errors={errors} name="singleErrorInput" render={({ message }) => <p>{message}</p>} />
    </>
  );
}

and upon submitting the form with errors, while errors object gets filled, e.g.:

{
    "deviceGroupId": {
        "message": "Группа устройств is a required field",
        "type": "required"
    },
    "state": {
        "message": "State is a required field",
        "type": "required"
    }
}

<ErrorMessage> component renders nothing and the render() doesn't get invoked.

[email protected]
@hookform/[email protected]

As per accessibility requirement we need to show total number of errors in a form.
For example:

1. A form with First name, Last name, email, age, telephone are required field.
2. User clicks on submit without entering any value to input fields.
3. We need to show a message on top of the page as "There are 5 errors". Screen reader will announce this message (helpful for non-sighted user).

I tried error.length and did not work. Want to know how can I achieve this to full fill accessibility requirement.

Basically what the title says.

Maybe there is an option to properly infer the string using TS 4.1 template literal string type?

ErrorMessage uses V6 API, so we need to pass the errors prop to make it work in V7

I'd like to make use of #87 but it was merged after the latest release from April 2021; could there be a new version cut and released possibly?

Hi all,

First of all, thanks a lot for providing us with a tool like this, it's a really good idea.

However, I can't seem to make it work, for some reason it keeps saying Object(...) is not a function.

I followed the basic example in the doc, here is my code:

https://jsfiddle.net/qa846skp/

(used fiddle just for the colors)

And the error: