Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add x-validator-merge prop && registerMergeRules api #4208

Closed

Conversation

electroluxcode
Copy link

@electroluxcode electroluxcode commented Aug 29, 2024

Before submitting a pull request, please make sure the following is done...

fix #4204

  • Ensure the pull request title and commit message follow the Commit Specific in English.
  • Fork the repo and create your branch from master or formily_next.
  • If you've added code that should be tested, add tests!
  • [] If you've changed APIs, update the documentation.
  • Ensure the test suite passes (npm test).
  • Make sure your code lints (npm run lint) - we've done our best to make sure these rules match our internal linting guidelines.

Please do not delete the above content


What have you changed?

description

This PR addresses the following issues and provides the following features:

  • 1 Added the x-validator-merge attribute to tags for merging with global validation. Custom global validation is sometimes needed, but due to Formity’s previous design, global validation, like required, couldn’t have custom messages. Even if attributes are set in x-validator, they are added as additional rules rather than replacing the existing ones. The x-validator-merge attribute allows merging global and local validations.

  • 2 Introduced the registerMergeRules API, which works similarly to registerValidateRules, allowing functions to override default global validation rules in Formity.

  • 3 Distinguished the state of rules into four types, with the first three being mergeable and the last one overriding the previous ones (refer to packages/validator/src/registry.ts):

    • 3.1 Global validation
    • 3.2 Shorthand property validation: required, maximum, minimum
    • 3.3 Local validation (mergeable): Rules specified by x-validator-merge or registerMergeRules
    • 3.4 Validator: Rules specified by x-validator, which do not participate in merging operations, as determined by Ant Design's properties
  • 4 Add the schema variable to the third function in the validation function. This helps in accessing schema information within custom validation functions. Previously, the context parameter was transformed by the SchemaStateMap variable in packages/json-schema/src/shared.ts, making it impossible for developers to retrieve information such as required, maximum, or minimum

registerMergeRules(api)

example

import React from 'react'
import { createForm, } from '@formily/core'
import {registerMergeRules} from "@formily/validator"
import { createSchemaField } from '@formily/react'
import { Form, FormItem, Input, NumberPicker } from '@formily/antd'

const form = createForm()

const SchemaField = createSchemaField({
  components: {
    Input,
    FormItem,
    NumberPicker,
  },
})
registerMergeRules({
  required:(e,ctx)=>{
    console.log(e, ctx)
    if(!e){
      return "jjjjjjjjjjjjjjj"
    }
  }
})
export default () => (
  <Form form={form} labelCol={6} wrapperCol={10}>
    <SchemaField>
      <SchemaField.String
        maximum={5}
        title={"d"}
        name="8"
        required
        x-component="Input"
        x-decorator="FormItem"
      />
    
    </SchemaField>
  </Form>
)

x-validator-merge(prop)

example

import React from 'react'
import { createForm, registerValidateRules,registerMergeRules } from '@formily/core'
import { createSchemaField } from '@formily/react'
import { Form, FormItem, Input, NumberPicker } from '@formily/antd'

const form = createForm()

const SchemaField = createSchemaField({
  components: {
    Input,
    FormItem,
    NumberPicker,
  },
})

export default () => (
  <Form form={form} labelCol={6} wrapperCol={10}>
    <SchemaField>
      <SchemaField.String
        maximum={5}
        name="8"
        required
         x-validator-merge={{
          required(value) {
              if (!value) return 'customer merge'
          }
         }}
        x-component="Input"
        x-decorator="FormItem"
      />
    
    </SchemaField>
  </Form>
)

@electroluxcode electroluxcode changed the title Fix/merge rules feat: add x-validator-merge prop && registerMergeRules api Aug 29, 2024
@liuweiGL
Copy link
Collaborator

liuweiGL commented Sep 5, 2024

image
image

required 可以自定义 message 的

@electroluxcode
Copy link
Author

electroluxcode commented Sep 5, 2024

@liuweiGL 感谢你的回复,之前确实没有没有看到 createField 这个 api,但是当我去看这个 api 的时候,感觉这个api似乎是偏底层的逻辑。尽管按照你说的是可以自定义message

但是不能够将其映射到视图上又或者是在这上面 生成或者挂载组件(#3808 (comment))

当然可能也是我对这个框架不熟悉哈哈,如果你有空的话可不可以给一个类似的demo呢


补充

刚刚我试着直接用 Field 添加 validator 这个属性,但是也有问题, 似乎只会在控制台输出,但是并不会呈现在界面上

import React from 'react'
import {
  Input,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, Field, } from '@formily/react'

const form = createForm()
const onClick = ()=>{
  form.submit()
}
export default () => (
  <>
    <button onClick={onClick}>点我</button>
   <FormProvider form={form}>
   
    <Field
      name="input"
      title="input box"
      component={[Input]}
       validator={{
            required:true,
            message:"custom valiate"
        }} 
    />
  
   
  </FormProvider>
  </>
)

@liuweiGL
Copy link
Collaborator

liuweiGL commented Sep 5, 2024

@electroluxcode
Copy link
Author

https://stackblitz.com/edit/vitejs-vite-mzaoib?file=src%2FApp.tsx

image

感谢,明白了。我这个mr提的方向错了,我关一下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request] 为什么自定义校验时候,value为空,不走自定义函数了?
2 participants