adverse-sapphire
adverse-sapphire•4mo ago

How to use validator to validate Form.List on Antd

const BankAccountSubForm = () => {
  return <Form.List
    name="bank_account"
  >
    {(fields, { add, remove }) => (
      <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
        {fields.map((field) => (
          <Card
            size="small"
            title={`Bank Account ${field.name + 1}`}
            key={field.key}
            extra={
              <CloseOutlined
                onClick={() => {
                  remove(field.name);
                }}
              />
            }
          >
            <Form.Item
              label="Bank Name"
              name={[field.name, "bank_name"]}
              rules={[
                {
                  required: true,
                  message: "Please Choose Bank",
                },
              ]}
            >
              <Select
                showSearch
                placeholder="Select a bank"
                optionFilterProp="label"
                options={banksInIndonesia.map((bank) => ({
                  value: bank,
                  label: bank,
                }))}
              />
            </Form.Item>
            <Form.Item
              label="Bank Number"
              name={[field.name, "bank_number"]}
              rules={[
                {
                  required: true,
                  message: "Mohon masukkan nomor rekening",
                },
                {
                  pattern: /^[0-9]*$/,
                  message: "Nomor rekening hanya boleh berisi angka",
                }
              ]}
            >
              <Input placeholder="1234567" />
            </Form.Item>
          </Card>
        ))}

        <Button type="dashed" onClick={() => add()} block>
          + Add Bank Account
        </Button>
      </div>
    )}
  </Form.List>
}
const BankAccountSubForm = () => {
  return <Form.List
    name="bank_account"
  >
    {(fields, { add, remove }) => (
      <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
        {fields.map((field) => (
          <Card
            size="small"
            title={`Bank Account ${field.name + 1}`}
            key={field.key}
            extra={
              <CloseOutlined
                onClick={() => {
                  remove(field.name);
                }}
              />
            }
          >
            <Form.Item
              label="Bank Name"
              name={[field.name, "bank_name"]}
              rules={[
                {
                  required: true,
                  message: "Please Choose Bank",
                },
              ]}
            >
              <Select
                showSearch
                placeholder="Select a bank"
                optionFilterProp="label"
                options={banksInIndonesia.map((bank) => ({
                  value: bank,
                  label: bank,
                }))}
              />
            </Form.Item>
            <Form.Item
              label="Bank Number"
              name={[field.name, "bank_number"]}
              rules={[
                {
                  required: true,
                  message: "Mohon masukkan nomor rekening",
                },
                {
                  pattern: /^[0-9]*$/,
                  message: "Nomor rekening hanya boleh berisi angka",
                }
              ]}
            >
              <Input placeholder="1234567" />
            </Form.Item>
          </Card>
        ))}

        <Button type="dashed" onClick={() => add()} block>
          + Add Bank Account
        </Button>
      </div>
    )}
  </Form.List>
}
This is my form, how to make sure this form is filled with at least 1 data
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @regn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To ensure that the Form.List is filled with at least one bank account entry, you can add a validation rule to the Form.List itself. Here's how you can modify your code to achieve this: 
import { Form, Card, Select, Input, Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
const BankAccountSubForm = () => {
  return (
    <Form.List
      name="bank_account"
      rules={[
        {
          validator: async (_, value) => {
            if (!value || value.length < 1) {
              return Promise.reject(new Error('At least one bank account is required'));
            }
          },
        },
      ]}
    >
      {(fields, { add, remove }) => (
        <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
          {fields.map((field) => (
            <Card
              size="small"
              title={`Bank Account ${field.name + 1}`}
              key={field.key}
              extra={
                <CloseOutlined
                  onClick={() => {
                    remove(field.name);
                  }}
                />
              }
            >
              <Form.Item
                label="Bank Name"
                name={[field.name, "bank_name"]}
                rules={[
                  {
                    required: true,
                    message: "Please Choose Bank",
                  },
                ]}
              >
                <Select
                  showSearch
                  placeholder="Select a bank"
                  optionFilterProp="label"
                  options={banksInIndonesia.map((bank) => ({
                    value: bank,
                    label: bank,
                  }))}
                />
              </Form.Item>
              <Form.Item
                label="Bank Number"
                name={[field.name, "bank_number"]}
                rules={[
                  {
                    required: true,
                    message: "Mohon masukkan nomor rekening",
                  },
                  {
                    pattern: /^[0-9]*$/,
                    message: "Nomor rekening hanya boleh berisi angka",
                  }
]}
              >
                <Input placeholder="1234567" />
              </Form.Item>
            </Card>
          ))}
<Button type="dashed" onClick={() => add()} block>
            + Add Bank Account
          </Button>
        </div>
      )}
    </Form.List>
  );
};
import { Form, Card, Select, Input, Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
const BankAccountSubForm = () => {
  return (
    <Form.List
      name="bank_account"
      rules={[
        {
          validator: async (_, value) => {
            if (!value || value.length < 1) {
              return Promise.reject(new Error('At least one bank account is required'));
            }
          },
        },
      ]}
    >
      {(fields, { add, remove }) => (
        <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
          {fields.map((field) => (
            <Card
              size="small"
              title={`Bank Account ${field.name + 1}`}
              key={field.key}
              extra={
                <CloseOutlined
                  onClick={() => {
                    remove(field.name);
                  }}
                />
              }
            >
              <Form.Item
                label="Bank Name"
                name={[field.name, "bank_name"]}
                rules={[
                  {
                    required: true,
                    message: "Please Choose Bank",
                  },
                ]}
              >
                <Select
                  showSearch
                  placeholder="Select a bank"
                  optionFilterProp="label"
                  options={banksInIndonesia.map((bank) => ({
                    value: bank,
                    label: bank,
                  }))}
                />
              </Form.Item>
              <Form.Item
                label="Bank Number"
                name={[field.name, "bank_number"]}
                rules={[
                  {
                    required: true,
                    message: "Mohon masukkan nomor rekening",
                  },
                  {
                    pattern: /^[0-9]*$/,
                    message: "Nomor rekening hanya boleh berisi angka",
                  }
]}
              >
                <Input placeholder="1234567" />
              </Form.Item>
            </Card>
          ))}
<Button type="dashed" onClick={() => add()} block>
            + Add Bank Account
          </Button>
        </div>
      )}
    </Form.List>
  );
};
The key change here is the addition of the rules prop to the Form.List component. We've added a custom validator that checks if the value (which is an array of bank accounts) exists and has at least one entry. If not, it rejects with an error message. This approach is based on the custom validation technique described in the Refine documentation for Ant Design forms Custom Form Validation (https://refine.dev/docs/examples/form/antd/custom-form-validation/). By adding this validation rule, the form will require at least one bank account to be added before it can be submitted successfully. The error message will be displayed if the user tries to submit the form without adding any bank accounts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@336843331416096768> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?