antd嵌套表单验证

好久之前写的，但是突然想起来没写到这里，还是写一下吧~, 也没啥技术含量，就是有需要的同学要是能一下子看到就方便了~
嵌套表单项精髓就是在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 (
                    <DTIFormItem
                      bordered={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.Group
                        onChange={(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 (
                                  <DTIFormItem
                                    bordered={false}
                                    name="selectTime"
                                    className={styles.timeWrapper}
                                  >
                                    <div className={styles.timeTip}>自选日期（全选将等同于每天）</div>
                                    <Checkbox.Group
                                      value={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 (
                    <DTIFormItem
                      label="限制时段：时间"
                      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.RangePicker
                        bordered={false}
                        format="HH:mm"
                        disabled={!timeLimitVal ? true : false}
                        style={{ height: '36px' }}
                        suffixIcon={<DTIIcon type="icon-xialazhankai" />}
                      ></TimePicker.RangePicker>
                    </DTIFormItem>
                  );
                }}
              </Form.Item>

代码不是完整的，但重要的思路与精髓都列出来啦，如果大家有疑问的给我留言吧~