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

Miyang 发布于2019-08-23 12:38 / 1966人阅读

摘要：一行一个标签对应多个输入组件，这个需求很常见但在官方例子没看到合适的，因为官方建议注意一个建议只放一个被装饰过的，当有多个被装饰过的时，无法自动生成。

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

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

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


        
            
                {this.props.form.getFieldDecorator("shareholderName2", {
                    rules: [{ required: true, message: "请输入股东名称" }],
                })()}
            
            
                
                    {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: "请输入正确的持股比例",
                        }],
                    })()}

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

海外云主机私有云 form表单校验多个form提交表单校验 form表单插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98885.html

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

摘要：一行一个标签对应多个输入组件，这个需求很常见但在官方例子没看到合适的，因为官方建议注意一个建议只放一个被装饰过的，当有多个被装饰过的时，无法自动生成。一行一个标签对应多个输入组件，这个需求很常见但在官方例子没看到合适的，因为官方建议：注意：一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，help...

ymyang 2019-08-02 11:52 评论0 收藏0
JSON生成Form表单

摘要：是校验表单组件数据正确性的字段，其值为数组，里面的数组元素可以为。所以数组元素如果为的话，其内容就是的。到目前为止，表单适合大部分的表单应用场景。 JSON表单描述 JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，它可以用简短的几行代码，快速的生成Form表单。JSON表单的优点是：可以快速构建出一个表单表单的数据、逻辑、视图分...

bingchen 2019-08-26 13:22 评论0 收藏0
JSON生成Form表单（三）

摘要：嵌套组件配置如果表单组件里还含有其他表单组件，这时直接通过组件配置去渲染无疑能节约不少的工作量。请输入方法传入组件配置的列表就能渲染出表单组件来，需要注意的是，子表单组件的一定是基于父表单组件的。表单的实例方法请看下节的生成表单四 container表单组件在实际的项目中，JSON表单提供的表单组件是远远不够的，而且提供表单组件是一件低效的事，目前Ant Design组件库提供的表单...

Half 2019-08-23 13:39 评论0 收藏0
antd多表单提交实例

摘要：场景下有三个，每个下是一个表单，点击不同下的提交按钮只能验证当前提交其值，进行相关操作问题判断校验结果就是对整个页面的进行判断，并不能够对单个校验结果做判断。场景： Tabs下有三个TabPane，每个TabPane下是一个form表单，点击不同form下的提交按钮只能验证当前form.item,提交其value值，进行相关操作问题： this.props.form.va...

miqt 2019-08-23 18:28 评论0 收藏0
antd源码解析（一）Form组件解析

摘要：引言看过源码的都知道，其实是在一组组件的基础上进行了一层封装，本文主要解读组件的基础组件，另外会略过模式下的代码。解读源码首先要从自己最常用的或者感兴趣的入手，首先组件最主要的还是在这个装饰器入手。引言看过antd源码的都知道，antd其实是在一组react-componment组件的基础上进行了一层ui封装，本文主要解读antd组件Form的基础组件react-componmen...

timger 2019-08-22 16:27 评论0 收藏0