antd form表单一行多个组件并对其校验
一行一个标签对应多个输入组件,这个需求很常见但在官方例子没看到合适的,因为官方建议:
注意:一个 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表单一行多个组件并对其校验的更多相关文章
- MVC下form表单一次上传多种类型的图片(每种类型的图片可以上传多张)
form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( ) { in ...
- 实现一个兼容eleUI form表单的多选组件
本质上是实现了一个eleUI select组件中的创建条目功能的组件,仅仅是将dropdown的选择框变成了label形式.支持eleUI的form表单校验,同时组件也提供了组件内自定义校验的方法.常 ...
- 关于Form表单一些基础知识
1.两个重要属性: action:表单需要提交的服务器地址 method:表单提交数据使用的方法,get/post >>>get和post的区别 ①get传参使用URL传递,所有参数 ...
- 关于antd form表单getFieldsError方法
getFieldsError()方法其实只有required:true时,双向数据绑定. {getFieldDecorator('note', { rules: [{ required: true, ...
- layui中进行form表单一些问题
最近一段时间一直在用layui来写一些前段页面,发现有几个问题,不知道是我的编译器的问题还是什么,总之目前是自己改成功了,在这里分享下. 第一个是用layui去写单选按钮,网页上不会显示出来.解决方法 ...
- flask通过form表单一次上传多个文件
基本上,用了flask官网的示例代码(中文版,英文版),稍微做了修改. import os from flask import Flask, flash, request, redirect, url ...
- jquery easyui form表单一开始就自动启用验证了,修改为form提交的时候在开启验证
<form method="post" action="<%=path %>" class="easyui-form" d ...
- react + antd Form表单校验
非空限制 {getFieldDecorator('name', { rules: [{ required: true, message: '名称不能为空', }],})( <Input plac ...
- django系列9--django中的组件(form表单)
modelform整体 from django import forms from app01 import models import hashlib from django.core.except ...
随机推荐
- 滑雪(dp或记忆化搜索)
题意:给你一个二维数组,求最长的递减路线的长度,只能向四个方向延伸. 解法1.dp[i][j]以i.j结尾的最长路线长度.边界:每个数初值为1, 转移:从四周向i.j转移,if(a[i][j]> ...
- JavaEE--EL表达式
EL(Expression Language)是为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 JSP 中简化表达式的方法,使得用户对 ...
- RabbitMQ入门教程(二):简介和基本概念
原文:RabbitMQ入门教程(二):简介和基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn ...
- 机器学习-聚类(clustering)算法:K-means算法
1. 归类: 聚类(clustering):属于非监督学习(unsupervised learning) 无类别标记(class label) 2. 举例: 3. Kmeans算法 3.1 clust ...
- ArrayList知识详解
简介 ArrayList是Java集合常用的数据结构之一,继承自AbstractList,实现了List,RandomAccess.Cloneable.Serializable等一系列接口,支持快速访 ...
- MathType 7.4.2.480
目录 1. 相关推荐 2. 按 3. 软件介绍 4. 安装步骤 5. 使用说明 6. 下载地址 1. 相关推荐 推荐使用:AxMath(AxMath可以与LaTeX进行交互):https://blog ...
- python子进程模块subprocess详解
subprocess--子进程管理器一.subprocess 模块简介subprocess最早是在2.4版本中引入的.subprocess模块用来生成子进程,并可以通过管道连接它们的输入/输出/错误, ...
- Linux系统Tomcat进程使用shutdown无法关闭进程
问题场景: 若在应用中启动了用户线程,在Linux系统Tomcat进程使用shutdown无法关闭进程. 解决方案: #1.在catalina.sh文件中添加CATALINA_PID [root@lo ...
- 用C#实现DES加密解密封装
主要用到C#提供的以下三个类:MemoryStream 内存流DESCryptoServiceProvider 加密服务提供者类CryptoStream 讲数据流连接到加密转换的流 using Sys ...
- Min-max theorem
wiki链接