antd form 动态增减表单项

需求：新增的modal，需要动态增加表单内容（表单 Form - Ant Design，可以进去自己看api和使用方法），并且进入modal的时候需要有默认初始的表单

如图所示，有默认的，点击添加的时候可以出新的表单，并且给后边跟上删除符号，当表单只剩下一层时候删除符号不展示

实现代码如下：

import { CloseCircleFilled } from '@ant-design/icons';
import { Col, Form, Input, Modal, Radio, Row } from 'antd';
import { useForm } from 'antd/es/form/Form';
import React from 'react';

type FormFields = {
  list: {
    keys: number[];
  }[];
};

type IProps = {
  visible: boolean;
  loading?: boolean;
  handleCancel: () => void;
  handleOk: (list) => void;
};

const formItemLayout = {
  labelCol: { xs: { span: 24 }, sm: { span: 4 } },
  wrapperCol: { xs: { span: 24 }, sm: { span: 20 } },
};
const formItemLayoutWithOutLabel = {
  wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 20, offset: 4 } },
};
const formItemButton = {
  wrapperCol: { span: 20, offset: 4 },
};

const Modal = (props: IProps) => {
  const { visible, loading, handleCancel, handleOk } = props;
  const [form] = useForm<FormFields>();

  const onFinish = (values: FormFields) => {
    const payload = values.list.map((item) => ({
      type: item['type'],
      name: item['name'],
    }));
    handleOk({ list: payload.filter((v) => v) });
  };

  return (
    <Modal
      destroyOnClose
      open={visible}
      title={xxx}
      onOk={() => form.submit()} // 这里可以让我们直接用form的onFinish
      onCancel={handleCancel}
      okText={xxx}
      cancelText={xxx}
      okButtonProps={{ loading }}
      afterClose={() => form.resetFields()} // 关了以后重置form
    >
      <Form form={form} onFinish={onFinish} >
        <Form.List name="list" initialValue={[{ name: '', type: null }]}> // initialValue 可以出现默认form表单
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, ...restField }) => ( // 这里的name是index
                <Row key={key} gutter={16}>
                  <Col span={20}>
                    <Form.Item
                      {...(name === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                      {...restField}
                      label={name === 0 ? `XXXX：` : ''}
                      name={[name, 'name']}
                      rules={[
                        { required: true, message: xxx},
                        {
                          max: 16,
                          message: xxx
                        },
                      ]}
                    >
                      <Input placeholder={xxx} />
                    </Form.Item>
                  </Col>

                  <Col span={1}>
                    {fields.length > 1 && (
                      <CloseCircleFilled onClick={() => remove(name)} />
                    )}
                  </Col>

                  <Col span={20}>
                    <Form.Item
                      {...formItemButton}
                      name={[name, 'type']}
                      rules={[{ required: true, message: xxx }]}
                    >
                      <Radio.Group  buttonStyle="solid">
                        <Radio.Button  value={type.xxx}>
                         xxxx
                        </Radio.Button>
                        <Radio.Button  value={type.xxx}>
                         xxx
                        </Radio.Button>
                        <Radio.Button value={type.xxx}>
                          xxx
                        </Radio.Button>
                      </Radio.Group>
                    </Form.Item>
                  </Col>
                </Row>
              ))}

              <Form.Item {...formItemLayoutWithOutLabel}>
                <a onClick={add}>xxx</a>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    </Modal>
  );
};

export default Modal;