</> `ErrorMessage:` 组件

一个简单的组件，用于渲染关联输入的错误消息。

npm install @hookform/error-message

属性

名称	类型	必需	描述
`name`	字符串	✓	字段名称。
`errors`	对象		来自 React Hook Form 的 `errors` 对象。如果您使用的是 `FormProvider`，则可选。
`message`	字符串 \| React.ReactElement		内联错误消息。
`as`	React.ElementType \| 字符串		包装组件或 HTML 标签。例如：`as="span"` 或 `as={<Text />}`
`render`	`({ message: string \| React.ReactElement, messages?: Object}) => any`		这是一个用于渲染错误消息或消息的渲染属性。注意：您需要将 `criteriaMode` 设置为 'all' 才能使用 `messages`。

示例

单个错误消息

CodeSandbox ^TS

import React from "react"
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>
  )
}

多个错误消息

CodeSandbox ^TS

import React from "react"
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>
  )
}

感谢您的支持

如果您发现 React Hook Form 在您的项目中很有用，请考虑为它加星并支持它。

错误消息

</> ErrorMessage: 组件

属性

感谢您的支持

</> `ErrorMessage:` 组件