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>