Ant design 4验证数组中的表单项

Ant Design 是一个由蚂蚁金服开发和维护的企业级UI设计语言和React组件库，它具有美观、实用和可定制的特点。Ant Design 提供了一系列丰富的表单组件和验证机制，可以用于验证数组中的表单项。在 Ant Design 4 中，可以使用 Form 组件和自定义校验规则来实现这个功能。

首先，我们需要使用 Form 组件来创建一个表单，并在表单中使用 FieldArray 组件来渲染数组字段。FieldArray 组件会遍历数组字段，并根据指定的模板组件来渲染每个表单项。例如，我们可以使用 Input 组件来渲染文本输入框。

在验证数组中的表单项时，我们可以在 FieldArray 组件中的模板组件中定义校验规则。可以使用 Ant Design 提供的内置校验规则，如 required（必填项）、pattern（正则表达式匹配）等，也可以自定义校验规则。

以下是一个示例代码：

import { Form, Input, Button } from 'antd';
import { FieldArray } from 'formik';

const MyForm = () => {
  const validateItem = (value) => {
    let error;
    if (!value) {
      error = '必填项';
    }
    return error;
  };

  return (
    <Form>
      <FieldArray name="items">
        {({ push, remove }) => (
          <div>
            {values.items.map((item, index) => (
              <div key={index}>
                <Form.Item
                  name={`items[${index}]`}
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[{ validator: validateItem }]}
                >
                  <Input placeholder="请输入内容" />
                </Form.Item>
                <Button onClick={() => remove(index)}>删除</Button>
              </div>
            ))}
            <Button onClick={() => push('')}>添加</Button>
          </div>
        )}
      </FieldArray>
      <Button type="primary" htmlType="submit">提交</Button>
    </Form>
  );
};

export default MyForm;

在上述示例中，我们使用 FieldArray 组件来渲染名为 "items" 的数组字段。对于每个表单项，我们使用 Form.Item 组件来包裹 Input 组件，并通过设置 name 属性来关联表单项的值与表单数据的对应字段。同时，我们设置了校验触发方式为 onChange 和 onBlur，并通过 rules 属性定义了校验规则。

当用户输入表单时，表单项的值会自动与表单数据保持同步。如果用户输入无效的值，如为空或不符合校验规则，Ant Design 会自动展示错误信息。用户可以通过点击删除按钮来删除某个表单项，也可以点击添加按钮来动态地添加表单项。

以上是利用 Ant Design 4 验证数组中的表单项的方法。如果你需要更详细的使用说明和示例代码，可以参考Ant Design 表单组件和Ant Design FieldArray的官方文档。