• More Info…

mode

언제 validation 검사를 할 지 정함

• onSubmit (디폴트) : submit 할 때
• onChange : 입력할 때 마다
• onBlur : 인풋 필드가 포커스를 잃을 때
• onTouched (추천)
  • 처음 입력 때는 blur 시 검사(즉 첫 입력도중엔 검사안함)
  • 그 후에 수정할 땐 change 시 검사

각 필드를 다른 시점에 검사할 수도 있음

const Forms: NextPage = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginForm>({
    mode: "onSubmit",
  });

  const { register: register2, formState: formState2 } = useForm<LoginForm>({
    mode: "onChange",
  });

	...

  return (
    ...
      <input
        {...register2("username", {
          required: "username is required",
          minLength: {
            value: 5,
            message: "The username should me longer than 5",
          },
        })}
        type="text"
        placeholder="Username"
      />
      {formState2.errors.username?.message}
      <input
        {...register("email", {
          required: "Email is required",
          validate: {
            notGmail: (value) =>
              !value.includes("@gmail.com") || "Do not use gmail",
          },
        })}
        type="email"
        placeholder="Email"
      />
      {errors.email?.message}
      ...
  );
};

• username은 onChange email은 onSubmit으로 처리

register

앨리먼트 속성 형식으로 사용

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

...
const { register } = useForm();

return (
	...
	<input
    {...register("username", { required: true })}
    type="text"
    placeholder="Username"
    minLength={5}
  />
)

에러 메시지

각 옵션에 원하는 값과 불만족할 때의 에러 메시지를 넣을 수 있음

{...register("username", {
    required: "username is required",
    minLength: {
      value: 5,
      message: "The username should me longer than 5",
    },
  })}

• required를 만족하지 않을 경우와 minlength를 만족하지 않았을 때의 에러메시지를 다르게함