Search code examples
javascriptreactjsformsantd

Cannot save data from Ant Design <Input.Group>

I tried making two input fields one for dimensions and one for weight, and both had seperate select drop down to allow the user to select a unit. I saw on Ant design docs that they had something similar, so I tried using that.

This is how I wanted it to be like: enter image description here

Now i have filled my form with many other fields and they work just fine, on clicking the save button, I am not getting any data entered in the fields for dimensions or weight, nor their units. I have a standard save function which is called on 'onFinish' event:

const handleSubmit = (data) => {
  console.log('data', data);
  submit(data);
};

This is my code to generate the fields.

<Form onFinish={handleSubmit} >
<Row style={{ justifyContent: 'left' }}>
  {<Col span={8}>
    <div className="p-2 lbh-input">
      <Form.Item
        name="dimensions"
        key="dimensions"
        label="Dimensions &nbsp;&nbsp; (l x b x h)">
        <Input.Group>
          <Input
            key='length'
            name='length'
            style={{ width: '15%' }}
            type="number"
          />
          <Input
            key='breadth'
            name='breadth'
            style={{ width: '24%' }}
            addonBefore="x"
            type="number"
          />
          <Input
            key='height'
            name='height'
            style={{ width: '25%' }}
            addonBefore="x"
            type="number"
          />
          <Select name='dimension_unit' key='dimension_unit' defaultValue="cm">
            <Option value="mm">mm</Option>
            <Option value="cm">cm</Option>
            <Option value="inch">inch</Option>
            <Option value="feet">feet</Option>
            <Option value="m">m</Option>
          </Select>
        </Input.Group>
      </Form.Item>
    </div>
  </Col>
  }
  {
    <div className="p-2">
      <Form.Item
        key="weight"
        name="weight"
        label="Weight">
        <Input.Group>
          <Input
            style={{ width: '50%' }}
            type="number"
            key="weight"
            name="weight"
            label="Weight"
            className='noborderradius'
          />
          <Select defaultValue="kg" name="weight_unit" key="weight_unit">
            <Option value="kg">kg</Option>
            <Option value="tonne">tonne</Option>
            <Option value="g">g</Option>
          </Select>
        </Input.Group>
      </Form.Item>
    </div>}
</Row>
<button>SUBMIT</button>
</Form>

As you can see, i have tried using everythihg I can like label,name,key but no matter what happens, I get no data being sent no matter what I type in these two fields. What am i missing? Am i doing something wrong with <Form.item> ? My ant design version is

"antd": "^4.3.4",
Solution

  • Input.Group is just for layout purposes, it does not group all your inputs into a single Form.Item. You still need to wrap all your inputs with Form.Item and attach the names there. Use the noStyle property to not override the Input.Group styling.

    Also, defaultValue will give you this warning:

    Warning: [antd: Form.Item] defaultValue will not work on controlled Field. You should use initialValues of Form instead.

    So you can just do as it says, I've removed the styling for brevity

        <Form
      onFinish={handleSubmit}
      initialValues={{ dimension_unit: 'cm', weight_unit: 'kg' }}
    >
      <Form.Item label="Dimensions &nbsp;&nbsp; (l x b x h)">
        <Input.Group>
          <Form.Item name="length" noStyle>
            <Input type="number" />
          </Form.Item>
          <Form.Item name="breadth" noStyle>
            <Input type="number" addonBefore="x" />
          </Form.Item>
          <Form.Item name="height" noStyle>
            <Input type="number" addonBefore="x" />
          </Form.Item>
          <Form.Item name="dimension_unit" noStyle>
            <Select>
              <Option value="mm">mm</Option>
              <Option value="cm">cm</Option>
              <Option value="inch">inch</Option>
              <Option value="feet">feet</Option>
              <Option value="m">m</Option>
            </Select>
          </Form.Item>
        </Input.Group>
      </Form.Item>

      <Form.Item label="Weight">
        <Input.Group>
          <Form.Item name="weight" noStyle>
            <Input type="number" />
          </Form.Item>
          <Form.Item name="weight_unit" noStyle>
            <Select>
              <Option value="kg">kg</Option>
              <Option value="tonne">tonne</Option>
              <Option value="g">g</Option>
            </Select>
          </Form.Item>
        </Input.Group>
      </Form.Item>

      <button>SUBMIT</button>
    </Form>

    Note that you don't need the key property.

    demo: https://stackblitz.com/edit/react-41wakw?file=demo.tsx