前言
当某些自定义的组合类组件,也希望能进行表单元素的校验,以及利用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();