set initalValues in nested dynamic form | Antd

Question

I've created the sandbox below hoping someone can help me.

https://codesandbox.io/s/suspicious-leaf-cijswt?file=/src/App.js

What I need to do is basically load the ingredients array as initialValues of Form.List.

Is that possible? If yes, how?

I'd really appreciate any help.

Thanks!

Answer 1

Use initialValues prop in Form to initialize fields. Since you named your FormList as users. You can set the values like this:

initialValues={{ users: ingredients }}

Now your field looks like this:

<Form.Item
    {...restField}
    name={[name, "first"]}
    rules={[{ required: true, message: "Missing first name" }]}
    >
        <Input placeholder="First Name" />
</Form.Item>

The most thing is the name attribute name={[name, "first"]}. In ingredients array, each object have the following keys: key, id, & amount. Suppose you want to show id & amount in each input. You specify the field path using [name, "id"]. where name presents the index of array & id is the key of object in an array. Antd will automatically get the value if it's available in that array.

I just make few changes changes like proper naming keys,... according to the data

Complete Code

import { Form, Input, Button, Space, InputNumber } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const ingredients = [
    {
        key: 0,
        name: 'Wheat Flour',
        amount: 1000
    },
    {
        key: 1,
        name: 'Sugar',
        amount: 800
    }
];

export default function App() {
    return (
        <Space style={{ display: 'flex', margin: 36 }} align='baseline'>
            <Form
                name='dynamic_form_nest_item'
                onFinish={console.log}
                autoComplete='off'
                initialValues={{ ingredients: ingredients }}
            >
                <Form.List name='ingredients'>
                    {(fields, { add, remove }) => (
                        <>
                            {fields.map(({ key, name, ...restField }) => (
                                <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align='baseline'>
                                    <Form.Item
                                        {...restField}
                                        name={[name, 'name']}
                                        rules={[{ required: true, message: 'Missing ingredient' }]}
                                    >
                                        <Input placeholder='Ingredient' />
                                    </Form.Item>
                                    <Form.Item
                                        {...restField}
                                        name={[name, 'amount']}
                                        rules={[{ required: true, message: 'Missing Amount' }]}
                                    >
                                        <InputNumber placeholder='Amount' />
                                    </Form.Item>
                                    <MinusCircleOutlined onClick={() => remove(name)} />
                                </Space>
                            ))}
                            <Form.Item>
                                <Button type='dashed' onClick={() => add()} block icon={<PlusOutlined />}>
                                    Add field
                                </Button>
                            </Form.Item>
                        </>
                    )}
                </Form.List>
                <Form.Item>
                    <Button type='primary' htmlType='submit'>
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </Space>
    );
}