trigger

trigger: UseFormTrigger

폼 또는 입력 검증을 수동으로 실행합니다. 종속 검증(입력 검증이 다른 입력의 값에 의존하는 경우)에도 유용합니다. trigger는 Promise<boolean>을 반환하며, 대상 필드가 검증을 통과하면 true, 그렇지 않으면 false로 이행됩니다.

매개변수

---

이름	타입	설명	예제
name	undefined	모든 필드의 검증을 실행합니다.	trigger()
	string	name으로 지정한 필드 값의 검증을 실행합니다.	trigger("yourDetails.firstName")
	string[]	name으로 지정한 여러 필드의 검증을 실행합니다.	trigger(["yourDetails.lastName"])
shouldFocus	boolean	v7.7.0부터 오류가 설정되면 입력에 포커스를 설정합니다. 입력의 참조가 등록된 경우에만 작동하며, 사용자 정의 register에도 작동하지 않습니다.	trigger('name', { shouldFocus: true })
shouldTouch	boolean	v7.87.0부터 검증 결과와 관계없이 대상 필드를 touched 상태로 표시합니다. 우회 방법으로 setValue의 shouldTouch 옵션을 사용하지 않고도 필드(또는 전체 폼)를 검증하면서 touched 상태로 표시할 때 유용합니다.	trigger('name', { shouldTouch: true })

규칙

렌더링 최적화 격리는 string 이름을 전달해 단일 필드를 대상으로 지정할 때만 적용됩니다. 이름 array를 전달하거나 인수 없이 trigger()를 호출하면 전체 폼 상태가 리렌더링됩니다.

예제:

---

import { useForm } from "react-hook-form"

type FormInputs = {
  firstName: string
  lastName: string
}

export default function App() {
  const {
    register,
    trigger,
    formState: { errors },
  } = useForm<FormInputs>()

  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <button
        type="button"
        onClick={() => {
          trigger("lastName")
        }}
      >
        Trigger
      </button>
      <button
        type="button"
        onClick={() => {
          trigger(["firstName", "lastName"])
        }}
      >
        Trigger Multiple
      </button>
      <button
        type="button"
        onClick={() => {
          trigger()
        }}
      >
        Trigger All
      </button>
    </form>
  )
}

import { useForm } from "react-hook-form"

export default function App() {
  const {
    register,
    trigger,
    formState: { errors },
  } = useForm()

  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <button
        type="button"
        onClick={async () => {
          const result = await trigger("lastName")
          // const result = await trigger("lastName", { shouldFocus: true }); allowed to focus input
        }}
      >
        Trigger
      </button>
      <button
        type="button"
        onClick={async () => {
          const result = await trigger(["firstName", "lastName"])
        }}
      >
        Trigger Multiple
      </button>
      <button
        type="button"
        onClick={() => {
          trigger()
        }}
      >
        Trigger All
      </button>
    </form>
  )
}

동영상

---

다음 동영상에서는 trigger API를 자세히 설명합니다.