基本的な使い方

1. Zodでバリデーションのスキーマを定義
   1. このスキーマはformデータの型としても利用できる
2. React Hook FormのuseFormフックを利用。この際にresolverを指定。先程作成したZodで定義したスキーマを利用。
3. inputにregisterを指定して入力フィールドをReact Hook Formの管理下に置く。

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

// まず、Zodを利用してバリデーションスキーマを定義します
const schema = z.object({
  name: z.string().nonempty({ message: 'Name is required' }),
  email: z.string().email({ message: 'Invalid email address' }),
});

// スキーマから型を生成します
type FormData = z.infer<typeof schema>;

const Form = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

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

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

      <input {...register("email")} />
      {errors.email && <p>{errors.email.message}</p>}

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

export default Form;

inputのonChangeを検知してバリデーション行いたい

  const {
    register,
    watch,
    setValue,
    formState: { errors },
  } = useForm<SearchFormInputs>({
    resolver: zodResolver(schema),
    mode: "onChange",
  });

modeは他にも

がある。

• https://react-hook-form.com/docs/useform#mode

setValue時にもonChangeイベントを発火させたい

setValue("query", suggestion.suggest, { shouldValidate: true });

• setValue then trigger the onChange event?