how to change default fields of Form.List in antd pro

Question

how I can add my own fields to fill it in the form list

<Form.List
          name="products"
        >
          {(data, { add, remove }) => {
            console.log(data);
            return (
              <>
                {data.map((product) => (
                  <>
                    <Col span={3} offset={2}>
                      <Form.Item
                        name={['referralNumber']}
                        rules={[{ required: true, message: 'Missing first name' }]}
                      >
                        <Input />
                      </Form.Item>
                    </Col>
                    <Col span={1} offset={1}>
                      <DeleteOutlined onClick={() => remove(product.id)} />
                    </Col>
                    <Divider />
                  </>
                ))}
                <Col span={24}>
                  <Form.Item>
                    <Button type="dashed" onClick={add} block icon={<PlusOutlined />}>
                      افزودن کالا
                    </Button>
                  </Form.Item>
                </Col>
              </>
            );
          }}
        </Form.List>

i wnat to have access to filed like this interface

export interface CreateReceiptItemDto {
  receiptId: number;
  productId: number;
  initialMainQuantity: number;
  initialSubQuantity: number;
  referralNumber: string;
}

---

but i always get something like this and its defin in node_modules like this

import * as React from 'react';
import { ValidatorRule, StoreValue } from 'rc-field-form/lib/interface';
export interface FormListFieldData {
    test: number;
    test2: number;
    fieldKey: number;
}
export interface FormListOperation {
    add: (defaultValue?: StoreValue, insertIndex?: number) => void;
    remove: (index: number | number[]) => void;
    move: (from: number, to: number) => void;
}
export interface FormListProps {
    prefixCls?: string;
    name: string | number | (string | number)[];
    rules?: ValidatorRule[];
    initialValue?: any[];
    children: (fields: FormListFieldData[], operation: FormListOperation, meta: {
        errors: React.ReactNode[];
    }) => React.ReactNode;
    }
    declare const FormList: React.FC<FormListProps>;
    export default FormList;

---

i think i need something to overwrite this definition or something like that to customize it

Answer 1

You can set values with initialValue props.

InitialValue props will set your fields defaultValue.

A Multiple value can set below code example:

<Form.List
          name="products"
          initialValue={[{ id: 5, name: 'example', mainUnit: '77', subUnit: '777' }]}
        >

A single value can set below code example:

<Form.Item
                          name={['id']}
initialValue="5"
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >

You can try with your preference values with single or multiple.

Answer 2

---

i fond this way to create an array of object by my own model by iterate a form with my name then filed name in that's form and submit i get my model as an array

  <Form.List
          name="products"
          initialValue={[{ id: 1, name: 'test', mainUnit: '2213', subUnit: '21312' }]}
        >
          {(data, { add, remove }) => {
            console.log(data);
            return (
              <>
                {data.map((product) => (
                  <>
                    <Form name="test">
                      <Col span={2}>
                        <Form.Item
                          name={['id']}
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={5} offset={2}>
                        <Form.Item
                          name={'name'}
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={2} offset={2}>
                        <Form.Item
                          name={'mainUnit'}
                          fieldKey={'mainUnit'}
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={2} offset={2}>
                        <Form.Item
                          name={'subUnit'}
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={3} offset={2}>
                        <Form.Item
                          name={['referralNumber']}
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={1} offset={1}>
                        <DeleteOutlined onClick={() => remove(product.id)} />
                      </Col>
                      <Divider />
                    </Form>
                  </>
                ))}
                <Col span={24}>
                  <Form.Item>
                    <Button type="dashed" onClick={add} block icon={<PlusOutlined />}>
                      افزودن کالا
                    </Button>
                  </Form.Item>
                </Col>
              </>
            );
          }}
        </Form.List>