antd form a plurality of assemblies form a row parity and its

A tag line corresponding to a plurality of input components, the demand is very common, but the official did not see Examples of suitable, because the official recommendations:

注意：一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，help required validateStatus 无法自动生成。

After exploration, it confirmed that it is feasible to write, as follows:

<FormItem
        {...formItemLayout}
        label={'主要股东'}
    >
        <Row gutter={30}>
            <Col span={8}>
                {this.props.form.getFieldDecorator('shareholderName2', {
                    rules: [{ required: true, message: '请输入股东名称' }],
                })(<Input placeholder={'请输入股东名称'} />)}
            </Col>
            <Col span={8}>
                <FormItem>
                    {this.props.form.getFieldDecorator('shareholderRate2', {
                        rules: [{
                            required: true,
                            // tslint:disable-next-line:max-line-length
                            pattern: /(^[1-9][0-9](\.\d)?$)|(^[1-9](\.\d)?$)|(^0\.\d$)/,
                            message: '请输入正确的持股比例',
                        }],
                    })(<Input addonAfter={'%'} placeholder={'请保留一位小数'}/>)}
                </FormItem>
            </Col>
        </Row>
    </FormItem>

The method is used to control the grid layout antd arranged behind the input component with FormItemanother layer of the package, so that also the correct position of the check, not just too cool. The effect is as:
image description

Guess you like