资讯专栏INFORMATION COLUMN

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

ymyang / 1326人阅读

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

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

注意:一个 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再包一层,这样校验位置也正确,简直不要太爽。效果如图:

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

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

相关文章

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

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

    Miyang 评论0 收藏0
  • JSON生成Form表单

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

    bingchen 评论0 收藏0
  • JSON生成Form表单(三)

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

    Half 评论0 收藏0
  • antd表单提交实例

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

    miqt 评论0 收藏0
  • antd源码解析(一)Form组件解析

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

    timger 评论0 收藏0

发表评论

0条评论

ymyang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<