Antd 的 Form.Item 表单嵌套时required必填项红点(红星)消失解决

Antd 的 Form.Item 表单嵌套时required必填项红点(红星)消失解决

如下图所示,如果在一个 Form.Item 中有两个或者多个输入组件,此时如果设置 rule required 必填项,Antd 并不会显示红色的星号表示必填,但是这时必填校验是生效了的。

如果我们想显示红星应该怎么解决?

先总结: 核心点就在-label 是用于展示文本的,name 才是 Form 管理表单的核心,同时内层的 Form.item 是不会显示星号的。所以我们只需要解决,在外层显示的 label 做文章,或者在 name 上做文章即可

第一种方法

通过在 label 部分添加星号并设置样式,如下使用 jsx 语法直接插入 DOM 元素作为 label,并直接给星号加上样式即可

而之所以 antd 不显示星号是因为:

我们在使用嵌套 Form.Item 的时候,都是使用外层的 Form.Item 包裹住内层的Form.Item。

同时外层的Form.Item 只设置 label ,并不会设置 name。 既然没有设置 name,Antd 自然无法正确为其生效校验,而 name 都是设置在内层对应的输入组件上,这样才能正确生效校验,同时也才能让 Form 管理表单项,正确收集数据和回显数据。

也就是说始终必填校验的星号需要设置在最外层Form.Item 才可以。

css 复制代码
label={
	<span>
		<span className={style.redStar}>*</span>
		<span>{tt('frequency')}</span>
	</span>
}

.redStar {
    margin-right: 4px;
    color: #ff4d4f;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
}

完整代码:

ini 复制代码
<Form.Item
	label={
		<span>
			<span className={style.redStar}>*</span>
			<span>{tt('frequency')}</span>
		</span>
	}
	style={{
		marginBottom: 0,
	}}
	>
	<Form.Item
		initialValue="hour"
		name="push_frequency_type"
		rules={[{ required: true }]}
		className={style.freqType}
		>
		<Select options={pushFrequencyTypeOptions} />
	</Form.Item>
	<Form.Item initialValue={1} name="week_day" rules={[{ required: true }]} className={style.week_day}>
		<Select options={genWeekOptions()} />
	</Form.Item>
	<Form.Item
		initialValue={0}
		name="week_hour"
		rules={[{ required: true }]}
		className={style.week_hour}
		>
		<Select options={genHourOptions()} />
	</Form.Item>
	<Form.Item className={style.colon}>:</Form.Item>
	<Form.Item
		initialValue={0}
		name="week_minute"
		rules={[{ required: true }]}
		className={style.week_minute}
		>
		<Select options={genMinuteOptions()} />
	</Form.Item>
</Form.Item>

SCSS:

css 复制代码
.redStar {
    margin-right: 4px;
    color: #ff4d4f;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
}

.freqType {
    display: inline-block;
    width: calc(30%);
}

.colon {
    display: inline-block;
    width: calc(5%);
    font-family: bold;
    text-align: center;
}

.week_day {
    display: inline-block;
    width: calc(30% - 20px);
    margin: 0 8px;
}

.week_hour {
    display: inline-block;
    width: calc(15%);
    margin: 0 8px;
}

.week_minute {
    display: inline-block;
    width: calc(15%);
    margin: 0 0 0 8px;
}

第二种方法

为外层设置 label 显示信息,设置 name 和 rules 进行校验,内层同时设置 name 和 rules,但 rules 需要将 message 置位空隐藏二次校验

这种方式只适合内层只有一个输入组件的情况,同时也不推荐,因为毕竟是触发了两次,性能是有问题的。

为什么会这样呢?只需要记住 label 是用于展示文本的,name 才是 Form 管理表单的核心,同时内层的 Form.item 是不会显示星号的。

ini 复制代码
<Form.Item label={tt('frequency')} name="push_frequency_type"
		rules={[{ required: true }]}>
	<Form.Item
		initialValue="hour"
		name="push_frequency_type"
		rules={[{ required: true, message: "", }]}
		>
		<Select options={pushFrequencyTypeOptions} />
	</Form.Item>	
	<ToolTip title='测试文本'>
		<div>测试文本</div>
	</ToolTip>
</Form.Item>

第三种方法

在最外层设置 label 和 required,内层的数据自己管理状态同时自己定义校验方法也可以。

ini 复制代码
<Form.Item label="XXX" required >
	<Form.Item
		name="time"
		nostyle
		rules={[
			{validator: oncheckTime}]}>
		<DatePicker showTime format="YYYY-MM-DD" disabled={showTime}>
		</Form.Item>
		<Tooltip title="一些必要的说明。。。。">
			<Radio value={1} checked={checkRadio} onchange={fonRadiochange}>选中√</Radio>
		</Tooltip>
	</Form.Item>
相关推荐
Jonathan Star13 分钟前
跨域处理的核心是解决浏览器的“同源策略”限制,主流方案
javascript·chrome·爬虫
果粒chenl1 小时前
React学习(四) --- Redux
javascript·学习·react.js
Never_Satisfied2 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
ZHOUYUANN3 小时前
我用JavaScript复刻了某宝的小游戏动物大迁徙消消乐
前端·javascript·游戏开发
Asort3 小时前
JavaScript设计模式(十三)——责任链模式:构建灵活高效的请求处理链
前端·javascript·设计模式
摸着石头过河的石头3 小时前
JavaScript继承与原型链:揭开对象传承的神秘面纱
前端·javascript
LRH3 小时前
React 双缓存架构与 diff 算法优化
前端·react.js
用户6387994773053 小时前
我把我的 monorepo 迁移到 Bun,这是我的真实反馈
javascript·架构
用户57973883973153 小时前
JavaScript(Node.JS) 使自定义类可以通过下标访问内部可迭代值
javascript
博客zhu虎康3 小时前
Element中 el-tree 如何隐藏 Tree 组件中的父节点 Checkbox
javascript·vue.js·elementui