React-Hook-Formの使い方（Part2：RHFとyupでバリデーション）🌟

はじめに

Part1ではRHFの使い方。Part2でははRHFとyupを合わせて利用する方法を見ていきます。次回のPart3ではさらにMUIとの併用を見ていきます。

※これはpart2になります。part1は以下リンク
https://qiita.com/shunnami/items/98c0c03e3eb59b5c9c57

パッケージインストール

yarn add yup hookform/resolvers

yupの使いかた

RHFの使い方はpart1で勉強しました。あとはyupの使い方を理解すればすぐに合体させて利用することができます。またyup自体も使い方は簡単です。
すでに詳細な使い方を説明している記事があるので以下を参照してください。
※2ページ目まで読めば次の項目をスムーズに読むことが出来ると思います。

https://codezine.jp/article/detail/13518

組み合わせる

yupの定義

まずは、バリデーションをyupで定義します。
yup.object().shapeに渡すオブジェクトのプロパティをpasswordにしています。これはregisterで登録したname属性にしてください。

import * as yup from "yup";
// スキーマ
const schema = yup.object().shape({
  password: yup
    .string()
    .min(4, "4桁以上必須")
    .max(20, "最大20桁")
    .required("必須です")
});

useFormのオプションを設定する

useFormの引数に値を渡すことでオプションを設定できます。yupを利用する際にはuseFormのオプションを設定する必要があります。その設定に必要なのが冒頭でインストールしたyupResolverです。yupResolverの引数には先ほど定義したスキーマを渡します。

import { yupResolver } from "@hookform/resolvers/yup";

useForm<IFormInputs>({
    // useFormの引数にyupResolverを設定
    resolver: yupResolver(schema)
  });

全体のコードを確認

上記の2つの工程でyupバリデーションが実現できました。最後にコード全体を見てみます。RHF単体のときよりyupを組み合わせたほうがエラーメッセージがスマートに出し分けできます。

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

// yupを利用するなら以下をimportする
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

// submitされる値の型定義
type IFormInputs = {
  password: string;
};

// submitをハンドリング
const formSubmitHandler: SubmitHandler<IFormInputs> = (data) => {
  console.log(data);
};

// スキーマ
const schema = yup.object().shape({
  password: yup
    .string()
    .min(4, "4桁以上必須")
    .max(20, "最大20桁")
    .required("必須です")
});

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors }
  } = useForm<IFormInputs>({
    // useFormの引数にyupResolverを設定
    resolver: yupResolver(schema)
  });

  return (
    <form onSubmit={handleSubmit(formSubmitHandler)}>
      <input {...register("password")} />
      {errors.password && (
        // errors.password.messageにはyupのスキーマで設定した値が入る
        <span style={{ color: "red" }}>{errors.password.message}</span>
      )}
      <br />
      <input type="submit" />
    </form>
  );
}