antd FormItem嵌套FormItem的适用场景

需求：表单中需要在item后面添加文字备注，如果不使用FormItem嵌套FormItem时，编辑操作的时候会出现回填不成功的问题。

当不使用formItem嵌套的时候：这时候点击编辑的时候，数据获取到了但是没有在页面中回填，原因是<FormItem></FormItem>中的根元素只能是一个表单控件标签，不能是<>或者是<div>等。

const formData = [{id: 'name',label: '广告名称',rules: [{ required: true, message:'请输入' }],children: <><Input allowClear placeholder='请输入' /><span>表单项的备注说明--广告名称</span></>,},{id: 'position',label: '广告位置',rules: [{ required: true, message:'请选择' }],children: <><Selectplaceholder='请选择'onChange={(value) => {setPosition(value);form.setFieldsValue({position: value,});}}>{positionOption}</Select><span>表单项的备注说明--广告位置</span></>,},
]
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>{formData.map((item, index) => {const key = `${index}_formDataItem`;return (<Col key={key} xs={24} sm={24} md={12} lg={8} xl={6}><FormItem label={item.label} name={item.id}>{item.children}</FormItem></Col>);})}
</Row>

这时候就该使用<FormItem></FormItem>嵌套解决问题，代码如下：

const formData = [{id: 'name',label: '广告名称',rules: [{ required: true, message: '请输入' }],remark: <span>备注说明--广告名称</span>,children: <Input allowClear placeholder='请输入' />,},{id: 'position',label: '广告位置',rules: [{ required: true, message: '请选择' }],remark: <span>备注说明--广告位置</span>,children: (<Selectplaceholder='请选择'onChange={(value) => {setPosition(value);form.setFieldsValue({position: value,});}}>{positionOption}</Select>),},
]
<Form form={form} labelCol={{ span: 2 }} wrapperCol={{ span: 16 }}>{formData.map(({ id, label, rules, hidden, children, remark }) => {return (<FormItemkey={id}label={label}hidden={hidden}required={id !== 'remarks' && true} // 手动添加required 属性><div className="flex items-center"><Col span={id === 'image' ? 4 : 18} className="mr-4"><FormItem name={id} rules={rules} noStyle>{children}</FormItem></Col><span>{remark}</span></div></FormItem>);})}</Form>

这时候就解决了编辑时回填的问题。

这时候又会出现另一个问题就是：“必填项的红色*在页面中没有出现，也就是<FormItem rules={rules}>绑定rules后红色*必填提示没有生效”，这时解决这个问题的办法就是在<FromItem>标签中手动添加 required属性。

antd FormItem嵌套FormItem的适用场景相关推荐

flex form formitem
form.formite 遍历 [color=blue]mxml:[/color] <mx:Form id="myform"> <mx:FormItem labe ...
怎么才能让Antd中的嵌套子表格渲染不一样的内容
目录一.子表格与父表格的数据存储在一起方式一:Function(record, index, indent, expanded):VNode 方式二:#expandedRowRender=&quo ...
Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解
缺乏耐心的读者请主要关注标红部分! 因部分内容自动转为代码格式,所以代码部分请主要关注注释部分! 1.Table表格组件内容自定义: 官网Table表格组件部分示例代码: columns12: [{t ...
vue-router之嵌套路由
❤记在前面 "自己"这个东西是看不见的,撞上一些别的什么,反弹回来,才会了解自己. 跟很强的东西.可怕的东西.水准很高的东西相碰撞,才知道"自己"是什么,这才是 ...
vue嵌套路由，二级路由使用介绍
vue-router 嵌套路由,二级子路由项目中如果都是一级路由,路由管理会有些乱.嵌套路由是路由中包含路由的意思,组件中可以有自己的路由导航和路由容器(router-link.router-vie ...
Antd源码浅析（二）InputNumber组件一
前言上篇我们讲了Icon组件,Icon组件是Antd源码库中实现比较简单的组件,适合大家入门,这篇文章主要和大家一起分析一下数字输入框组件,即InputNumber,难度适中,但蕴含的Antd里较为 ...
WRF系列教程3：嵌套方式总结
WRF使用基本上会涉及到嵌套,主要原因是:WRF使用的是等经纬网格,不具备局地加密的能力,全场都使用高分辨率网格则会耗费大量的计算资源,无法满足时效性的要求. 使用嵌套的加密方式能够实现在关键区域采取 ...
Python中的If嵌套讲解（语法、实例、执行流程）
If就是if条件语句,嵌套的意思可以理解为在生活当中有种玩具叫做俄罗斯套娃,这个套娃呢就是大的套娃里面有小的娃,小娃里面有更小的娃,就这样一层一层的套下去.在编程语言当中,if嵌套指代的意思是一个大的 ...
java多层if else嵌套语句的优化思路，滑动验证码防刷功能开发
阿里巴巴java开发手册里面,在控制语句部分有一个推荐,如下: [推荐]表达异常的分支时,少用 if-else 方式,这种方式可以改写成: if (condition) { ...return obj ...
C语言结构体联合体 | 嵌套使用
一.简单的实例分析题目:获取0x12345678各个字节. 答案: //方法一: #include <stdio.h>typedef unsigned int uint32_t; typ ...

antd FormItem嵌套FormItem的适用场景

antd FormItem嵌套FormItem的适用场景相关推荐

最新文章

热门文章