formily icon indicating copy to clipboard operation
formily copied to clipboard

自定义校验获取不到item的数据 && registerValidateRules定义后的数据x-validator无法对其进行覆盖

Open electroluxcode opened this issue 1 year ago • 0 comments

  • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

  • 支持 在 x-validator 的 array<{message:any, rule:any}>中的 messagee定义 方法可以获取当前的formitem数据,目前只支持 string字符串,改成方法后自定义程度会高很多
  • 支持 在 x-validator 的 object 中的 message 定义 规则,目前存在一个问题,在registerValidateRules中定义过后的规则,无法在x-validator 中进行覆盖

对于问题一,期待的如下:

import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider,createSchemaField } from '@formily/react'
import { registerMergeRules,registerValidateRules } from '@formily/validator'
import { Input, FormItem, FormButtonGroup, Submit } from '@formily/antd';



const SchemaField = createSchemaField({
  components: {
    Input,
    FormItem,
  },
});
const form = createForm()

const schema= {
  type: 'object',
  properties: {
    input: {
      type: 'string',
      title: '输入框',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-component-props': {
        style: {
          width: 240,
        },
      },
       'x-validator': [{
        required: true,
        message: (value,context)=>{
          console.log(value,context)
          return context.field.title + ':请输入内容'
        },
       },]
    },
  },
};

export default () => (
  <>
   <FormProvider form={form}>
    <SchemaField schema={schema} />
    <FormButtonGroup>
      <Submit onSubmit={form.submit()}>提交</Submit>
    </FormButtonGroup>
  </FormProvider>
  </>
)

对于问题二,期待的如下:

import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider,createSchemaField } from '@formily/react'
import { registerMergeRules,registerValidateRules } from '@formily/validator'
import { Input, FormItem, FormButtonGroup, Submit } from '@formily/antd';

registerValidateRules({
  required(e,_,ctx) {
    if (!e) return `${ctx.field.title}:全局校验`
  }
})
const SchemaField = createSchemaField({
  components: {
    Input,
    FormItem,
  },
});
const form = createForm()

const schema= {
  type: 'object',
  properties: {
    input: {
      type: 'string',
      title: '输入框',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-component-props': {
        style: {
          width: 240,
        },
      },
       'x-validator':   {
          required: `{{(value,context)=>{
            console.log(value,context)
            return "局部校验"
          }}}`,
          // required2: (value,context)=>{
          //   console.log(value,context)
          //   return "局部校验2222"
          // }
       }
    },
  },
};

export default () => (
  <>
   <FormProvider form={form}>
    <SchemaField schema={schema} />
    <FormButtonGroup>
      <Submit onSubmit={form.submit()}>提交</Submit>
    </FormButtonGroup>
  </FormProvider>
  </>
)

electroluxcode avatar Sep 05 '24 15:09 electroluxcode