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.

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",

CodePudding user response：

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

CodePudding user response：

What you can do is instead of wrapping the entire <Input.Group> with a single <Form.Item> you need to wrap each <Input> with its own <Form.Item> and give each one a unique key and name.

Working Code Sandbox

   <Input.Group>
    <Form.Item
      name="length"
      key="length"         
    >
      <Input
        style={{ width: '15%' }}
        type="number"
      />
    </Form.Item>
    <Form.Item
      key='breadth'
      name='breadth'
    >
      <Input
        style={{ width: '24%' }}
        addonBefore="x"
        type="number"
      />
    </Form.Item>
      ...
    </Input.Group>