Antd design: Form : How to use form.setFieldsValue to change data?

Question

My question is How to correctly use form.setFieldsValue function to manipulate the form data?

I am stuck with this issue where I have to get image url from data to show as Avatar. (Antd does not have Image component look like)

so When I open Modal Image should be displayed. I am trying to setFieldsValue as shown but its showing grey image not real image.

https://ant.design/components/form/

I am doing like this currently:

  const showModal = (record) => {
    console.log('record', record);
    setPropertyKey(record.id)
   //form.setFieldsValue(record);
    form.setFieldsValue({
      ...record,
    propertyImage: 'https://quadreal.findspace.com/images/preview_images/building_hero_crop_commerce-court-west-commerce-court.jpg'
    });
    setVisible(true);
  };



   <Modal
        centered
        title={modalTitle}
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        confirmLoading={confirmLoading}>
        <Form
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
          initialValues={{ size: 'middle' }}
          size={'middle'}
          onFinish={onFinish}>

          <Form.Item label="Property Image" name="propertyImage">
          <Avatar shape="square" size={164}/>
          </Form.Item>
        </Form>
      </Modal>

score 0 · Answer 1 · answered May 13 '20 at 11:22

do you need Form component here?

you can show image with this simple code:

<Avatar
 shape="square"
 size={164} 
 src="https://quadreal.findspace.com/images/preview_images/building_hero_crop_commerce-court-west-commerce-court.jpg"
/>

if you need form use prop valuePropName on Form.Item:

<Form.Item label="Property Image" name="propertyImage" valuePropName="src">
  <Avatar shape="square" size={164}/>
</Form.Item>

Antd design: Form : How to use form.setFieldsValue to change data?

1 Answers1