React Hook Form を Chakra UI と一緒に使ってみた

React Hook Form を Chakra UI と一緒に使ってみた。

フォームの実装とバリデーションの実装に React Hook Form を使ってみることにした。

React Hook Form

既に Chakra UI を導入しているため組み合わせることになる。
一応公式に使い方が紹介されている。

Chakra UI + React Hook Form

このまま実装した際、私の環境だとエラーメッセージの部分がエラーになってしまった。

<FormErrorMessage>
    {errors.password && errors.password.message?.toString()}
</FormErrorMessage>

このように message の後ろに toString() をつけてやると動作するようになった。

リンクの部分、当初は

{
    "links": [
        {
            "name": "リンクタイトル1",
            "url": "http://example.com"
        },
        {
            "name": "リンクタイトル2",
            "url": "http://example.com"
        },
        {
            "name": "リンクタイトル3",
            "url": "http://example.com"
        }
    ]
}

こういう配列にしようとして、一応値を入れることはできた。
でもバリデーションエラーメッセージをどうしても正しく取り出せず、面倒になって配列をやめてしまった。

たぶん useFieldArray を正しく使えば実装できるはずで、今の実装は拡張性ゼロなので来週以降にやる気が出たら再チャレンジしたい。

2022/07/03 追記：useFieldArray にした → https://gitlab.com/k1350/sololog_gql/-/commit/9058763f632f177d4ba16411bcba8c961f260430

＊　＊　＊

またリンクについては「リンクタイトルを入力したら URL は必須入力」という仕様を想定しており、このバリデーションの実装でかなり迷走したのだが

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<Input
    id={`link-url-${i}`}
    {...register(`links${i}_url`, {
        maxLength: {
            value: 3000,
            message: CONSTANT.ERROR_MESSAGE.MAX_LENGTH(3000),
        },
        validate: (value: string) => {
            if (watch(`links${i}_name`) !== "" && value === "") {
                return CONSTANT.ERROR_MESSAGE.LINK_URL_REQUIRED;
            }
        },
    })}
></Input>

複合バリデーションはこの validate というやつでよかった。
“react hook form password confirmation” でググって発見した。

一度 useEffect 内で setError と clearErrors を使ってバリデーションしようとしたらなぜか useEffect が無限に呼び出されるようになり、原因不明である。
clearErrors が無限呼び出しを生み出しているっぽいのだが……。

進捗
https://gitlab.com/k1350/sololog_gql/-/commit/19c610e8c23bfa9ee5b3108c5039187fd20349ca

おわり