antd form表单一行多个组件并对其校验

2019年9月20日 348次阅读 来源: ppsspp

一行一个标签对应多个输入组件，这个需求很常见但在官方例子没看到合适的，因为官方建议：

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

经过摸索，证实这样写是可行的，如下：

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

方法就是用antd的栅格布局来控制排列，在后面的输入组件用FormItem再包一层，这样校验位置也正确，简直不要太爽。效果如图：
《antd form表单一行多个组件并对其校验》

    原文作者：ppsspp
    原文地址: https://segmentfault.com/a/1190000016873514
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞