antd form表单中嵌套自定义组件

前言

当某些自定义的组合类组件，也希望能进行表单元素的校验，以及利用antd的form表单实例进行数据的修改或者数据获取，这招便可以派上用场啦~

表单部分

<Form.Item label="周期" labelAlign="right">
    {
   getFieldDecorator('cycle', {
   
        rules: [{
    required: true, validator: checkCycle }],
        initialValue: cycle,
    })(<CycleInput cycleOptions={
   cycleOptions} />)}
</Form.Item>

表单部分可以引入自定义的校验逻辑，如上面的checkCycle ：
可以像下面这样，通过Promise.reject()返回错误校验提示，通过Promise.resolve()正确通过校验。

/** 校验生命周期输入内容 */
const checkCycle = useCallback((_, value) => {
   
     const format = value?.split(' ');
     if (!format) return Promise.reject(new Error('周期不可为空!'));

     /** always 永久保存选项 */
     if (format.length < 2 && format[0] === 'always') {
   
         return Promise.resolve();