From cd335b3781c10fe246cf6105040fcf50dc254169 Mon Sep 17 00:00:00 2001 From: jizai1125 <1414589221@qq.com> Date: Fri, 19 Apr 2024 17:54:22 +0800 Subject: [PATCH] feat(Form): add `on-validate` prop, closes ##5883 --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + src/form/demos/enUS/index.demo-entry.md | 3 ++- src/form/demos/zhCN/index.demo-entry.md | 1 + src/form/index.ts | 3 ++- src/form/src/Form.tsx | 9 ++++++--- src/form/src/FormItem.tsx | 13 ++++++++----- src/form/src/interface.ts | 4 ++-- 8 files changed, 23 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 7329256b3ee..bb803fb78fd 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -30,6 +30,7 @@ - `n-form-item` add `feedback-vertical` prop and `feedback-crosswise` prop - `n-split` supports setting the pixel value size. - `n-scrollbar` adds `content-style` and `content-class` props, closes [#4497](https://github.com/tusen-ai/naive-ui/issues/4497). +- `n-form` adds `on-validate` prop, closes [#5883](https://github.com/tusen-ai/naive-ui/issues/5883). ## 2.38.1 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 63ec638afc4..0bb750d6864 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -30,6 +30,7 @@ - `n-form-item` 新增 `feedback-vertical` 和 `feedback-crosswise` 属性 - `n-split` 支持设置像素值大小 - `n-scrollbar` 新增 `content-style` 和 `content-class` 属性，关闭 [#4497](https://github.com/tusen-ai/naive-ui/issues/4497) +- `n-form` 新增 `on-validate` 属性, 关闭 [#5883](https://github.com/tusen-ai/naive-ui/issues/5883) ## 2.38.1 diff --git a/src/form/demos/enUS/index.demo-entry.md b/src/form/demos/enUS/index.demo-entry.md index 1bb9b5e8358..2bf0ab25c5f 100644 --- a/src/form/demos/enUS/index.demo-entry.md +++ b/src/form/demos/enUS/index.demo-entry.md @@ -57,13 +57,14 @@ feedback-position.vue | Property | Type | Description | Version | -| --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | asyncValidator | `(rule: FormItemRule, value: any, callback: (error?: Error) => void) => void` | Asynchronous validation in the form of a callback. | | | message | `string` | Text to show when validation fails. | | | renderMessage | `() => VNodeChild` | Render function or message. | 2.29.1 | | required | `boolean` | Is it required. | | | trigger | `string \| Array` | Trigger type. | | | validator | `(rule: FormItemRule, value: any) => boolean \| Error` | Validation rule. | | +| on-validate | `(path: string \| undefined, result: FormItemValidateResult) => void` | `-` | triggers after any form item is validated | NEXT_VERSION | #### FormValidateMessages Type diff --git a/src/form/demos/zhCN/index.demo-entry.md b/src/form/demos/zhCN/index.demo-entry.md index d4b87ef9cbb..d40579d5d75 100644 --- a/src/form/demos/zhCN/index.demo-entry.md +++ b/src/form/demos/zhCN/index.demo-entry.md @@ -47,6 +47,7 @@ feedback-position.vue | require-mark-placement | `'left' \| 'right' \| 'right-hanging'` | `'right'` | 必填星号的位置 | `'right-hanging'` 2.24.0 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 | | | validate-messages | `FormValidateMessages` | `undefined` | `async-validator` 的默认验证信息 | 2.27.0 | +| on-validate | `(path: string \| undefined, result: FormItemValidateResult) => void` | `-` | 任一表项被校验后触发 | NEXT_VERSION | #### FormItemRule Type diff --git a/src/form/index.ts b/src/form/index.ts index afd49ec6676..cf57c387ea9 100644 --- a/src/form/index.ts +++ b/src/form/index.ts @@ -17,7 +17,8 @@ export type { FormItemInst, FormItemRule, FormRules, - FormValidationError + FormValidationError, + FormItemValidateResult } from './src/interface' // deprecated diff --git a/src/form/src/Form.tsx b/src/form/src/Form.tsx index a69e6c00791..b6471649c13 100644 --- a/src/form/src/Form.tsx +++ b/src/form/src/Form.tsx @@ -22,7 +22,7 @@ import type { FormInst, Size, FormValidateMessages, - FormItemInternalValidateResult + FormItemValidateResult } from './interface' import { type ExtractPublicPropTypes, keysOf } from '../../_utils' import { formInjectionKey, formItemInstsInjectionKey } from './context' @@ -62,7 +62,10 @@ export const formProps = { type: Boolean as PropType, default: undefined }, - validateMessages: Object as PropType> + validateMessages: Object as PropType>, + onValidate: Function as PropType< + (path: string | undefined, result: FormItemValidateResult) => void + > } as const export type FormSetupProps = ExtractPropTypes @@ -94,7 +97,7 @@ export default defineComponent({ return await new Promise<{ warnings: ValidateError[][] | undefined }>( (resolve, reject) => { const formItemValidationPromises: Array< - Promise + Promise > = [] for (const key of keysOf(formItems)) { const formItemInstances = formItems[key] diff --git a/src/form/src/FormItem.tsx b/src/form/src/FormItem.tsx index 56aef2cc9b8..334701638c1 100644 --- a/src/form/src/FormItem.tsx +++ b/src/form/src/FormItem.tsx @@ -49,7 +49,7 @@ import type { FormItemValidateOptions, FormItemInst, FormItemInternalValidate, - FormItemInternalValidateResult, + FormItemValidateResult, FeedBackPositonCrosswise, FeedBackPositonVertical } from './interface' @@ -93,7 +93,8 @@ export const formItemProps = { type: Boolean as PropType, default: undefined }, - labelProps: Object as PropType + labelProps: Object as PropType, + onValidate: Function as PropType<(errors: ValidateError[]) => void> } as const export type FormItemSetupProps = ExtractPropTypes @@ -337,7 +338,7 @@ export default defineComponent({ const warningValidator = new Schema({ [mergedPath]: activeWarningRules as RuleItem[] }) - const { validateMessages } = NForm?.props || {} + const { validateMessages, onValidate } = NForm?.props || {} if (validateMessages) { validator.messages(validateMessages) warningValidator.messages(validateMessages) @@ -363,7 +364,7 @@ export default defineComponent({ }) } - const validationResult: FormItemInternalValidateResult = { + const validationResult: FormItemValidateResult = { valid: true, errors: undefined, warnings: undefined @@ -405,7 +406,9 @@ export default defineComponent({ ) { restoreValidation() } - + if (onValidate && activeRules.length > 0) { + onValidate(path, validationResult) + } return validationResult } provide(formItemInjectionKey, { diff --git a/src/form/src/interface.ts b/src/form/src/interface.ts index bb8682fe89a..fb6ee31a80c 100644 --- a/src/form/src/interface.ts +++ b/src/form/src/interface.ts @@ -44,7 +44,7 @@ export interface FormItemValidateOptions { options?: ValidateOption } -export interface FormItemInternalValidateResult { +export interface FormItemValidateResult { valid: boolean errors: ValidateError[] | undefined warnings: ValidateError[] | undefined @@ -54,7 +54,7 @@ export type FormItemInternalValidate = ( trigger: ValidationTrigger | string | null | undefined, shouldRuleBeApplied?: ShouldRuleBeApplied, options?: ValidateOption -) => Promise +) => Promise export type FormItemValidate = ((options: FormItemValidateOptions) => Promise<{ warnings: ValidateError[] | undefined