There is a kind of confusion called a face meng force, when understand the truth suddenly realized.

There is a demo on ant Design’s website called Dynamic add/subtract Form items, which is very handy for dynamically adding options, but it doesn’t provide default values, and none of the demos that use form.list. ! _! How to display the default value?

Official website of the DEMO

The sample code of demo is

<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" > <Form.List name="users"> {(fields, { add, remove }) => { return ( <div> {fields.map(field => ( <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="start"> <Form.Item {... field} name={[field.name, 'startTime']} fieldKey={[field.fieldKey, 'startTime']} rules={[{ required: true, message: 'Missing first name' }]} > <Input placeholder="First Name" /> </Form.Item> <Form.Item {... field} name={[field.name, 'endTime']} fieldKey={[field.fieldKey, 'endTime']} rules={[{ required: true, message: 'Missing last name' }]} > <Input placeholder="Last Name" /> </Form.Item> <MinusCircleOutlined onClick={() => { remove(field.name); }} /> </Space> ))} <Form.Item> <Button type="dashed" onClick={() => { add(); }} block > <PlusOutlined /> Add field </Button> </Form.Item> </div> ); }} </Form.List> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form>Copy the code

The display effect is

Setting defaults

In the 4.x version of ANTD, use initialValues at the form level to set the default values.

<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" initialValues={{"users": [{
        fieldKey: 0,
        isListField: true,
        key: 0,
        name: 0,
        endTime: "14:48",
        startTime: "14:48",
      }, {
        fieldKey: 1,
        isListField: true,
        key: 1,
        endTime: "14:48",
        startTime: "14:48",
        name: 1
      }]}}>
Copy the code

InitialValues is added and the default value is set for the form. List whose name is “Users”. The complete code is

<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" initialValues={{"users": [{ fieldKey: 0, isListField: true, key: 0, name: 0, endTime: "14:48", startTime: "14:48", }, { fieldKey: 1, isListField: true, key: 1, endTime: "14:48", startTime: "14:48", name: 1 }]}}> <Form.List name="users"> {(fields, { add, remove }) => { return ( <div> {fields.map(field => ( <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="start"> <Form.Item {... field} name={[field.name, 'startTime']} fieldKey={[field.fieldKey, 'startTime']} rules={[{ required: true, message: 'Missing first name' }]} > <Input placeholder="First Name" /> </Form.Item> <Form.Item {... field} name={[field.name, 'endTime']} fieldKey={[field.fieldKey, 'last']} rules={[{ required: true, message: 'Missing last name' }]} > <Input placeholder="Last Name" /> </Form.Item> <MinusCircleOutlined onClick={() => { remove(field.name); }} /> </Space> ))} <Form.Item> <Button type="dashed" onClick={() => { add(); }} block > <PlusOutlined /> Add field </Button> </Form.Item> </div> ); }} </Form.List> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form>Copy the code

The default is:

Do not understand when extremely difficult, difficult. When I see the truth, I feel refreshed!!

// END likes autumn wind, with a little fruit fragrance