</> `setError:` `(name: string, error: FieldError, { shouldFocus?: boolean }) => void`

이 함수를 사용하면 하나 이상의 오류를 수동으로 설정할 수 있습니다.

Props

이름	타입	설명
`name`	string	input의 이름.
`error`	`{ type: string, message?: string, types: MultipleFieldErrors }`	에러 타입과 메시지를 설정.
config	`{ shouldFocus?: boolean }`	에러 설정 시 input에 포커스를 맞출지 여부. 이 기능은 input의 참조가 등록된 경우에만 작동하며, 커스텀 등록에서는 작동하지 않음.

규칙

이 메서드는 input이 register의 관련 규칙을 통과하면 관련된 input 에러를 유지하지 않음.

register("registerInput", { minLength: 4 })
setError("registerInput", { type: "custom", message: "custom message" })
// minLength 요구사항을 통과하면 검증이 통과됨

input 필드와 관련되지 않은 에러는 clearErrors로 지울 때까지 유지됨. 이 동작은 필드 수준의 내장 검증에만 적용됨.

setError("notRegisteredInput", { type: "custom", message: "custom message" })
// 해당 커스텀 에러를 제거하려면 clearErrors()를 수동으로 호출해야 함

root를 키로 사용하여 서버 또는 전역 에러를 설정할 수 있음. 이 유형의 에러는 각 제출 시 유지되지 않음.
```
setError("root.serverError", {
  type: "400",
})
setError("root.random", {
  type: "random",
})
```
비동기 검증 후 사용자에게 에러 피드백을 제공하고 싶을 때 handleSubmit 메서드에서 유용하게 사용할 수 있음. (예: API가 검증 에러를 반환하는 경우)
input이 비활성화된 경우 shouldFocus가 작동하지 않음.
이 메서드는 isValid formState를 강제로 false로 설정함. 그러나 isValid는 항상 input 등록 규칙 또는 스키마 결과의 검증 결과에서 파생된다는 점을 유의해야 함.
타입 검사와 충돌을 방지하기 위해 type 및 types와 같은 특정 키워드를 피해야 함.

예제:

단일 에러

CodeSandbox ^TS

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

type FormInputs = {
  username: string
}

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

  React.useEffect(() => {
    setError("username", {
      type: "manual",
      message: "Dont Forget Your Username Should Be Cool!",
    })
  }, [setError])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} />
      {errors.username && <p>{errors.username.message}</p>}

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

다중 에러

CodeSandbox ^TS

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

type FormInputs = {
  username: string
  firstName: string
}

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Username</label>
      <input {...register("username")} />
      {errors.username && <p>{errors.username.message}</p>}
      <label>First Name</label>
      <input {...register("firstName")} />
      {errors.firstName && <p>{errors.firstName.message}</p>}
      <button
        type="button"
        onClick={() => {
          const inputs = [
            {
              type: "manual",
              name: "username",
              message: "Double Check This",
            },
            {
              type: "manual",
              name: "firstName",
              message: "Triple Check This",
            },
          ]

          inputs.forEach(({ name, type, message }) => {
            setError(name, { type, message })
          })
        }}
      >
        Trigger Name Errors
      </button>
      <input type="submit" />
    </form>
  )
}

단일 필드 에러

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

type FormInputs = {
  lastName: string
}

const App = () => {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
  } = useForm<FormInputs>({
    criteriaMode: "all",
  })

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

  React.useEffect(() => {
    setError("lastName", {
      types: {
        required: "This is required",
        minLength: "This is minLength",
      },
    })
  }, [setError])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Last Name</label>
      <input {...register("lastName")} />
      {errors.lastName && errors.lastName.types && (
        <p>{errors.lastName.types.required}</p>
      )}
      {errors.lastName && errors.lastName.types && (
        <p>{errors.lastName.types.minLength}</p>
      )}
      <input type="submit" />
    </form>
  )
}

서버 에러

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

const App = () => {
  const { register, handleSubmit, setError, formState: { errors } } = useForm({
    criteriaMode: 'all',
  });
  const onSubmit = async () => {
    const response = await fetch(...)
    if (response.statusCode > 200) {
        setError('root.serverError', {
          type: response.statusCode,
        })
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Last Name</label>
      <input {...register("lastName")} />

      {errors.root.serverError.type === 400 && <p>server response message</p>}

      <button>submit</button>
    </form>
  );
};

비디오

아래 비디오는 setError API를 자세히 설명합니다.

여러분의 지원에 감사드립니다

React Hook Form이 프로젝트에서 유용하다면, GitHub에서 스타를 눌러 지원해 주세요.

setError

</> setError: (name: string, error: FieldError, { shouldFocus?: boolean }) => void

Props

비디오

여러분의 지원에 감사드립니다

</> `setError:` `(name: string, error: FieldError, { shouldFocus?: boolean }) => void`