MantineでuseFormを使った入力チェック

はじめに

前回Mantineで簡単なログイン画面を作成しましたが、今回はそのログイン画面に入力チェックを追加していきたいと思います。

https://zenn.dev/collabostyle/articles/59b1c3b6999746

事前準備

ターミナルから以下コマンドでmantine formをインストールします。

npm install @mantine/form

初期値の設定

以下のようにuseForm関数に各項目の初期値のオブジェクトを渡してformオブジェクトを生成します。

import { useForm } from "@mantine/form";

const form = useForm({
  initialValues: {
    userId: "",
    password: "",
  },
});

項目との紐づけ

formオブジェクトと項目を紐付けします。
各項目のJSXタグに「...form.getInputProps("項目キー")」のスプレッド構文を追加します。

<Text>ユーザーID</Text>
<TextInput placeholder="ユーザーID"
  mb={20}
  {...form.getInputProps("userId")}
/>
<Text>パスワード</Text>
<PasswordInput placeholder="パスワード"
  mb={20}
  {...form.getInputProps("password")}
/>

入力チェック処理

useFormの中にvalidateオブジェクトを定義し、チェック処理を記述します。
正常な場合はnullを返し、問題がある場合は表示するエラーメッセージを返します。

const form = useForm({
  initialValues: {
    userId: "",
    password: "",
  },
  validate: {
    userId: (value) => (
      value.length < 1 ? "ユーザーIDを入力してください。" : null
    ),
    password: (value) => (
      value.length < 1 ? "パスワードを入力してください。" : null
    ),
  },
});

全体のコード

全体のコードは以下になります。

App.tsx

import {
  Box,
  Button,
  Center,
  Container,
  MantineProvider,
  PasswordInput,
  Text,
  TextInput,
} from "@mantine/core";
import { useForm } from "@mantine/form";

export default function Demo() {
  const form = useForm({
    initialValues: {
      userId: "",
      password: "",
    },
    validate: {
      userId: (value) => (
        value.length < 1 ? "ユーザーIDを入力してください。" : null
      ),
      password: (value) => (
        value.length < 1 ? "パスワードを入力してください。" : null
      ),
    },
  });

  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <Container maw={400} h={200} mt={100}>
        <Box
          sx={(theme) => ({
            backgroundColor: "#ffffff",
            padding: theme.spacing.xl,
            border: `2px solid ${theme.colors.gray[5]}`,
            borderRadius: theme.radius.md
          })}
        >
          <form onSubmit={form.onSubmit(console.log)}>
            <Text>ユーザーID</Text>
            <TextInput placeholder="ユーザーID"
              mb={20}
              {...form.getInputProps("userId")}
            />
            <Text>パスワード</Text>
            <PasswordInput placeholder="パスワード"
              mb={20}
              {...form.getInputProps("password")}
            />
            <Center>
              <Button type="submit">ログイン</Button>
            </Center>
          </form>
        </Box>
      </Container>
    </MantineProvider>
  );
}

実行

今回はユーザーID、パスワードが未入力の場合に入力チェックがかかるようにしました。
どちらも未入力のままログインボタンをクリックすると、以下のように各項目の下部にエラーメッセージが表示されます。

まとめ

項目の紐づけをおこない、チェック処理を記述するだけで簡単に実装できました。
対象項目を赤枠にしたり、エラーメッセージを該当項目の下部に表示するのはMantine側でやってくれるので楽ですね🙌

Mantineは他にも色々機能があるので、試していきたいと思います。