본문으로 건너뛰기

clearErrors

</> clearErrors: UseFormClearErrors​

이 함수는 폼의 오류를 수동으로 지울 수 있습니다.

Props(속성)​

타입설명예시
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[]: 지정한 필드의 오류를 재설정합니다.

예시​
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>
  )
}