当前位置：首页 > news >正文

antd嵌套表单验证

news 2025/5/14 17:50:19

好久之前写的，但是突然想起来没写到这里，还是写一下吧~, 也没啥技术含量，就是有需要的同学要是能一下子看到就方便了~
嵌套表单项精髓就是在shouldUpdate属性
在这里插入图片描述

注意这句，当 shouldUpdate 为 true 时，Form 的任意变化都会使该 Form.Item 重新渲染。

要注意 Form.Item 里包裹的子组件必须由函数返回

我们的示例是当前可选【限制时间】与【不限制时间】，然后【限制时间】的话要把时间填上，切换这个时间的时候，我们所填的限制时间要清空

我们在外层的Form.Item上加上shouldUpdatae属性，如果此项依赖于表单其他getFieldValue方法取出此属性值，再return返回表单项

<Form.Item shouldUpdate className={styles.timesDay}>
{({ getFieldValue }) => {
const timeLimitVal = getFieldValue(‘timeLimit’);
return (
<Form.Item></Form.Item>
)
} <Form.Item>

那我们可以使用那每次【是否限制时间】选项切换的时候，嵌套表单项都可以进行重新渲染，自动清空、是否禁用等操作，提交表单的时候也会都验证上。

   <Form.Item shouldUpdate className={styles.timesDay}>{({ getFieldValue }) => {const timeLimitVal = getFieldValue('timeLimit'); // 【是否限制时间】选项取值return (<DTIFormItembordered={true}label="限制时段：天"name="periodDate"rules={[// 自定义验证{required: timeLimitVal === 1,},() => ({validator(_, value) {if (timeLimitVal === 0) {return Promise.resolve();}if (!value) {return Promise.reject(new Error('请选择限制时间段')); // 返回promise表单验证报错项}if (value === 1 ||value === 2 ||(value === 3 && selectTime.length !== 0)) {return Promise.resolve();}if (value === 3 && selectTime.length === 0) {return Promise.reject(new Error('请选择限制时间段'));}},}),]}><Radio.GrouponChange={(e) => {let val = e.target.value;if (val === 1 || val === 2) {setSelectTime([]);}}}disabled={!timeLimitVal} // 表单项是否禁用><Space direction="vertical"><Radio value={1}>每天</Radio><Radio value={2}>法定工作日</Radio><Radio value={3}><Form.Item shouldUpdate>{({ getFieldValue }) => {const periodDate = getFieldValue('periodDate'); // 嵌套表单项，选择【自选日期】return (<DTIFormItembordered={false}name="selectTime"className={styles.timeWrapper}><div className={styles.timeTip}>自选日期（全选将等同于每天）</div><Checkbox.Groupvalue={selectTime}defaultValue={selectTime}options={TimeRanges}disabled={!timeLimitVal || periodDate !== 3} // 【自选日期】为某项时不可用 onChange={(val) => {setSelectTime(val);sourceForm.validateFields(['periodDate']);}}/></DTIFormItem>);}}</Form.Item></Radio></Space></Radio.Group></DTIFormItem>);}}</Form.Item>

  <Form.Item shouldUpdate style={{ marginBottom: 0 }}>{({ getFieldValue }) => {const timeLimitVal = getFieldValue('timeLimit');// 此处代码是取【是否限制时间】这个表单项return (<DTIFormItemlabel="限制时段：时间"name="rangeTime"bordered={true}id={styles.detail}className={!timeLimitVal ? styles.disabledTime : ''}rules={[// 自定义验证() => ({validator(_, value) {console.log(value);console.log(timeLimitVal);if (value) {if (timeLimitVal === 1 && value.length !== 2) {return Promise.reject(new Error('请选择限制时间段'));} else {return Promise.resolve();}} else {return Promise.reject(new Error('请选择限制时间段'));}},}),]}><TimePicker.RangePickerbordered={false}format="HH:mm"disabled={!timeLimitVal ? true : false}style={{ height: '36px' }}suffixIcon={<DTIIcon type="icon-xialazhankai" />}></TimePicker.RangePicker></DTIFormItem>);}}</Form.Item>