Search code examples
javascriptreactjsantdant-design-proumijs

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


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


Solution


  • 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>