ErrorMessage

</> ErrorMessage: Component

연결된 입력의 오류 메시지를 렌더링하는 간단한 컴포넌트입니다.

npm install @hookform/error-message

Props

---

이름	타입	필수	설명
name	string	✓	필드 이름입니다.
errors	object		React Hook Form의 errors 객체입니다. FormProvider를 사용한다면 선택 사항입니다.
message	string | React.ReactElement		인라인 오류 메시지입니다.
as	React.ElementType | React.ReactElement | string		래퍼 컴포넌트, 요소 인스턴스 또는 HTML 태그입니다. 예: as="span" 또는 as={<Text />}
render	({ message: string | React.ReactElement, messages?: Object}) => any		오류 메시지를 렌더링하는 render prop입니다. 참고: criteriaMode를 'all'로 설정해야 messages를 사용할 수 있습니다.

예제:

---

단일 오류 메시지

import { useForm } from "react-hook-form"
import { ErrorMessage } from "@hookform/error-message"

interface FormInputs {
  singleErrorInput: string
}

export default function App() {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm<FormInputs>()
  const onSubmit = (data: FormInputs) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("singleErrorInput", { required: "This is required." })}
      />
      <ErrorMessage errors={errors} name="singleErrorInput" />

      <ErrorMessage
        errors={errors}
        name="singleErrorInput"
        render={({ message }) => <p>{message}</p>}
      />

      <input type="submit" />
    </form>
  )
}

import { useForm } from "react-hook-form"
import { ErrorMessage } from "@hookform/error-message"

export default function App() {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm()
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("singleErrorInput", { required: "This is required." })}
      />
      <ErrorMessage errors={errors} name="singleErrorInput" />

      <ErrorMessage
        errors={errors}
        name="singleErrorInput"
        render={({ message }) => <p>{message}</p>}
      />

      <input type="submit" />
    </form>
  )
}

여러 오류 메시지

import { useForm } from "react-hook-form"
import { ErrorMessage } from "@hookform/error-message"

interface FormInputs {
  multipleErrorInput: string
}

export default function App() {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm<FormInputs>({
    criteriaMode: "all",
  })
  const onSubmit = (data: FormInputs) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("multipleErrorInput", {
          required: "This is required.",
          pattern: {
            value: /\d+/,
            message: "This input is number only.",
          },
          maxLength: {
            value: 10,
            message: "This input exceed maxLength.",
          },
        })}
      />
      <ErrorMessage
        errors={errors}
        name="multipleErrorInput"
        render={({ messages }) =>
          messages &&
          Object.entries(messages).map(([type, message]) => (
            <p key={type}>{message}</p>
          ))
        }
      />

      <input type="submit" />
    </form>
  )
}

import { useForm } from "react-hook-form"
import { ErrorMessage } from "@hookform/error-message"

export default function App() {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm({
    criteriaMode: "all",
  })
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("multipleErrorInput", {
          required: "This is required.",
          pattern: {
            value: /\d+/,
            message: "This input is number only.",
          },
          maxLength: {
            value: 10,
            message: "This input exceed maxLength.",
          },
        })}
      />
      <ErrorMessage
        errors={errors}
        name="multipleErrorInput"
        render={({ messages }) =>
          messages &&
          Object.entries(messages).map(([type, message]) => (
            <p key={type}>{message}</p>
          ))
        }
      />

      <input type="submit" />
    </form>
  )
}