【React】Mantineの「use-form」のバリデーションで他項目の値を参照したい

概要

UIライブラリのMantineではReact Hook Formのような、フォーム用のhooksであるuse-formの機能があります。基本的な使い方はReact Hook Formと似たような雰囲気で、Mantineを導入していればフォーム周りの実装は基本的に、use-formの機能である程度は対応できるかなという所感です。（一応、MantineのUIライブラリを使わず、use-formだけでも独立して使えるようですが）

use-formにはバリデーションの機能もあり、そこまで複雑なバリデーションを実装する必要がなければzodを入れなくてもいいかなと思います。なお、Form schema validationのドキュメントで紹介されている通り、zod等を組み込む機能も用意はされています。
今回はuse-formのバリデーションを使った時に、他項目の値を参照してチェックをかけたい場合の実装について紹介します。

前提

• 使用したMantineのバージョンは8.1.0です。

対応

Validation based on other form valuesのドキュメントにある通り、項目毎のvalidateのメソッドで引数にvaluesを追加で設定することで他項目の値を参照できます。

実装サンプル

以下のようなフォームの型を用意します。実現したいこととしてはdeadLineCheckが"hour"の時だけ、deadLineCheckSubSettingHourに入力チェックをかけたいというものになります。

export type TaskInputFormValues = {
  title: string;
  deadLineCheck: string;
  deadLineCheckSubSettingHour?: number;
};

useForm部分の実装は以下の通りとなります。なお、number型の入力にはMantineのNumberInputコンポーネントを使用する前提としています。

const form = useForm<TaskInputFormValues>({
  mode: "uncontrolled",
    initialValues: {
      title: "",
      deadLineCheck: "",
      deadLineCheckSubSettingHour: undefined,
    },
    validate: {
      title: (value) => {
        if (!value) {
          return "タイトルを入力してください";
        }
        return null;
      },
      deadLineCheckSubSettingHour: (value, values) => {
        // 他項目を参照してチェックを行う
        if (values.deadLineCheck === "hour") {
          if (value == null || value <= 0) {
            return "時間を入力してください";
          }
        }
        return null;
      }
    },
  });