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

news/2024/7/4 1:41:33

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

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


http://www.niftyadmin.cn/n/2087927.html

相关文章

怎樣制作线段动画_PPT如何制作简易动画

原标题&#xff1a;PPT如何制作简易动画很多时候&#xff0c;我们看到的一些简易动画&#xff0c;其实用PPT就可以制作了。这里分享一下如何用PPT制作简易动画方法和步骤&#xff1a;简易线条动画&#xff1a;1. 打开幻灯片—点击“插入”、“形状”&#xff0c;选择线条&#…

java基础篇5之泛型

1 泛型的基本应用 //反射方式 指定类型&#xff0c;就不用强转 Construcctor<String> constructor String.class.getConstructor(Stringbuffer.class); 泛型是提供给javac编译器使用的&#xff0c;可以限定集合输入的类型&#xff0c; 编译器编译带类型说明的集合时&…

vue缓存之keep-alive,设置想要缓存的页面

结合router&#xff0c;缓存部分页面 <keep-alive><router-view v-if"$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if"!$route.meta.keepAlive"></router-view> {path: /,name: Hello,compo…

Vue.js 2.2 卡片api

给vue开发者和爱好者发送点福利&#xff01; 卡片上一共117个api&#xff0c;方便查阅 网址: https://vuejs-tips.github.io/cheatsheet Github: https://github.com/vuejs-tips/cheatsheet PDF: https://vuejs-tips.github.io/cheatsheet/vuejs-cheatsheet.pdf 原文地址&#…

linux 编译mqtt静态库_Linux动态库和静态库教程

本教程以Ubuntu16.04系统为例&#xff0c;实验涉及的程序文件有&#xff1a;xyhcal.c&#xff0c;add.c&#xff0c;sub.c&#xff0c;mul.c&#xff0c;xyhcal.h&#xff0c;这五个文件的源代码如图1所示&#xff1a;图1 源代码示意图Linux动态库具体实现步骤如下&#xff1a;…

android贪吃蛇项目代码_如何用C语言做贪吃蛇小游戏?

C语言作为计算机编程最初学的语言&#xff0c;作为高级语言的C语言&#xff0c;那么它又可以为我们实现什么功能呢&#xff1f;我认为有强大的基础技能和无限的脑洞&#xff0c;你就可以做出许多我们意想不到的程序出来&#xff0c;关键在于你是否敢想敢做&#xff1f;下面我就…

WASND6.1官方不支持SUSE 10.3,我手工让它自检通过支持项

编辑一个maintenance.xml文件&#xff0c;文件内容如下&#xff1a; − <install-package> − <nif-cache id"nifcache" impl"com.ibm.ws.install.ni.framework.plugin.NIFCachePlugin"> <param name"cacheid" value"primar…

mysql中查询没有选修某两门课的_关于MySQL的经典例题50道

--1.学生表Student(S,Sname,Sage,Ssex) --S 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别--2.课程表Course(C,Cname,T) --C --课程编号,Cname 课程名称,T 教师编号--3.教师表Teacher(T,Tname) --T 教师编号,Tname 教师姓名--4.成绩表SC(S,C,score) --S 学生编号,C 课程…