React Ant Design Formの使い方をまとめてみた

Ant Design Formでこれだけ抑えれば何とかなる知識をまとめました

この記事では、Ant Designのフォームコンポーネントの基本的な使い方について、実際のコード例とともに解説します。基本的な観点としては以下のポイントに注目します。

1. 入力された最終的なformオブジェクトの取得方法
2. formオブジェクトのカラムの指定方法
3. バリデーションの制定方法

基本的なフォームの使い方

まずは、Ant Designのフォームを使った簡単なログインフォームの実装例を見てみましょう。このフォームでは、ユーザーの名前とメールアドレスを入力し、送信ボタンを押すことでフォームの値をコンソールに出力しています。 最終的な値をAPIにリクエストするのによく使うコードです。

'use client'
import { Flex, Form, Input, Button, Typography } from 'antd'

const SimpleForm = () => {

  const onFinish = (value) => {
    console.log('value', value)
    // value {name: '山田太郎', email: 'test@example.com'}
  }

  return (
    <Flex style={{ padding: 10, flexDirection: 'column', width: 300 }}>
      <Typography>ログインフォーム</Typography>
      <Form onFinish={onFinish}>
        <Form.Item name='name' rules={[{ required: true, message: '名前を入力してください' }]}>
          <Input placeholder='name'/>
        </Form.Item>
        <Form.Item name='email' rules={[{ required: true, message: 'メールアドレスを入力してください' }, { type: 'email', message: '有効なメールアドレスを入力してください' }]}>
          <Input placeholder='email'/>
        </Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form>
    </Flex>
  )
}

export default SimpleForm

入力された最終的なformオブジェクトの取得方法

フォームが送信されると、onFinish関数が呼び出され、入力された値がvalueオブジェクトとして渡されます。このオブジェクトには、フォーム内の各フィールドの名前をキーとした値が含まれます。

const onFinish = (value) => {
  console.log('value', value)
  // value {name: '山田太郎', email: 'test@example.com'}
}

解説

動きを細かく見ていきましょう

formオブジェクトのカラムの指定方法

各フォームフィールドはForm.Itemコンポーネントで定義され、nameプロパティでフィールド名を指定します。これにより、フォームが送信された際に、各フィールドの値がオブジェクトの対応するキーとして設定されます。

<Form.Item name='name'>
  <Input placeholder='name'/>
</Form.Item>
<Form.Item name='email'>
  <Input placeholder='email'/>
</Form.Item>

バリデーションの設定方法

rulesプロパティを使用して、各フィールドに対するバリデーションルールを指定します。ルールはオブジェクトの配列として渡され、各オブジェクトにはrequiredやtypeなどのプロパティを設定できます。

<Form.Item 
  name='name' 
  rules={[{ required: true, message: '名前を入力してください' }]}>
  <Input placeholder='name'/>
</Form.Item>
<Form.Item 
  name='email' 
  rules={[
    { required: true, message: 'メールアドレスを入力してください' }, 
    { type: 'email', message: '有効なメールアドレスを入力してください' }
  ]}>
  <Input placeholder='email'/>
</Form.Item>

カスタムバリデーション

Ant Designのフォームでは、カスタムバリデーションを使用して特定の条件に基づいてフォームの入力を検証することができます。以下の例では、名前のフィールドに対して「田中」という名前は無効とするカスタムバリデーションを設定しています。

const SimpleForm = () => {

  const onFinish = (value) => {
    console.log('value', value)
  }

  const validateName = (rule, value) => {
    if (value && value.includes('田中')) {
      return Promise.reject('田中という名前は無効です');
    }
    return Promise.resolve();
  };

  return (
    <Flex style={{ padding: 10, flexDirection: 'column', width: 300 }}>
      <Typography>ログインフォーム</Typography>
      <Form onFinish={onFinish}>
        <Form.Item 
          name='name' 
          rules={[
            { required: true, message: '名前を入力してください' }, 
            { validator: validateName }
          ]}>
          <Input placeholder='name'/>
        </Form.Item>
        <Form.Item 
          name='email' 
          rules={[
            { required: true, message: 'メールアドレスを入力してください' }, 
            { type: 'email', message: '有効なメールアドレスを入力してください' }
          ]}>
          <Input placeholder='email'/>
        </Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form>
    </Flex>
  )
}

実務でよくあるユースケース

実際に開発現場でよくあるユースケースとしては指定の項目を入力すると他のフィールドを操作する事がよくあります。その場合の実装を見ていきましょう。

フォーム項目の依存関係操作

特定のフォーム項目が変更されたときに他のフォーム項目の値を操作するユースケースもよくあります。以下の例では、メールアドレスのフィールドが変更されたときに名前のフィールドの値をクリアします。

const SimpleForm = () => {
  const [form] = Form.useForm();

  const onFinish = (value) => {
    console.log('value', value)
  }

  const onEmailChange = (e) => {
    form.setFieldsValue({ name: '' });
  };

  return (
    <Flex style={{ padding: 10, flexDirection: 'column', width: 300 }}>
      <Typography>ログインフォーム</Typography>
      <Form form={form} onFinish={onFinish}>
        <Form.Item 
          name='name' 
          rules={[{ required: true, message: '名前を入力してください' }]}>
          <Input placeholder='name'/>
        </Form.Item>
        <Form.Item 
          name='email' 
          rules={[
            { required: true, message: 'メールアドレスを入力してください' }, 
            { type: 'email', message: '有効なメールアドレスを入力してください' }
          ]}>
          <Input placeholder='email' onChange={onEmailChange}/>
        </Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form>
    </Flex>
  )
}

export default SimpleForm

解説

• Form.useForm: フォームインスタンスを作成するためのフックです。これにより、フォーム内の値や状態を操作できます。
• onEmailChange関数: メールアドレスフィールドのonChangeイベントハンドラーです。このハンドラーで名前フィールドの値をクリアしています。

実際によくあるケースとしては、税別金額を入力したら、税率を掛けて税込金額のフィールドを操作するユースケースなどがよくあると思います

まとめ

これで、Ant Designのフォームコンポーネントを使った基本的な使い方、カスタムバリデーションの設定方法、およびフォーム項目の依存関係を操作する方法について解説しました。これらの基本を押さえておけば、基本的な実装は対応できる様になると思います。是非参考にしていただけると嬉しいです！