</> `clearErrors:` (name?: string | string[]) => void

この関数は、フォーム内のエラーを手動でクリアできます。

プロパティ

型	説明	例
undefined	すべてのエラーを削除します。	`clearErrors()`
string	単一のエラーを削除します。	`clearErrors("yourDetails.firstName")`
string[]	複数のエラーを削除します。	`clearErrors(["yourDetails.lastName"])`

undefined: すべてのエラーをリセット

string: 単一のフィールドまたはキー名でエラーをリセットします。

register("test.firstName", { required: true })
register("test.lastName", { required: true })
clearErrors("test") // will clear both errors from test.firstName and test.lastName
clearErrors("test.firstName") // for clear single input error

string[]: 指定されたフィールドのエラーをリセットします

ルール

これは、各入力にアタッチされた検証ルールには影響しません。
このメソッドは、検証ルールまたはisValid formStateには影響しません。

例

CodeSandbox ^TS

import * as React from "react"
import { useForm } from "react-hook-form"

type FormInputs = {
  firstName: string
  lastName: string
  username: string
}

const App = () => {
  const {
    register,
    formState: { errors },
    handleSubmit,
    clearErrors,
  } = useForm<FormInputs>()

  const onSubmit = (data: FormInputs) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <input {...register("username", { required: true })} />
      <button type="button" onClick={() => clearErrors("firstName")}>
        Clear First Name Errors
      </button>
      <button
        type="button"
        onClick={() => clearErrors(["firstName", "lastName"])}
      >
        Clear First and Last Name Errors
      </button>
      <button type="button" onClick={() => clearErrors()}>
        Clear All Errors
      </button>
      <input type="submit" />
    </form>
  )
}

ご支援ありがとうございます

もしReact Hook Formがあなたのプロジェクトで役立つと感じたら、スターを付けて応援してください。

clearErrors

</> clearErrors: (name?: string | string[]) => void

プロパティ

ご支援ありがとうございます

</> `clearErrors:` (name?: string | string[]) => void