diff --git a/packages/components/form/form-item.tsx b/packages/components/form/form-item.tsx index 50f446d724..03512eb916 100644 --- a/packages/components/form/form-item.tsx +++ b/packages/components/form/form-item.tsx @@ -164,7 +164,7 @@ export default defineComponent({ /** Suffix Icon END */ /** Content Style */ - const errorClasses = computed(() => { + const statusClasses = computed(() => { if (!showErrorMessage.value) return ''; if (verifyStatus.value === ValidateStatus.SUCCESS) { return props.successBorder @@ -176,7 +176,7 @@ export default defineComponent({ if (props.status) return statusClass.value; return type === 'error' ? CLASS_NAMES.value.error : CLASS_NAMES.value.warning; }); - const contentClasses = computed(() => [CLASS_NAMES.value.controls, errorClasses.value]); + const contentClasses = computed(() => [CLASS_NAMES.value.controls, statusClasses.value]); const contentStyle = computed(() => { let contentStyle = {}; if (labelWidth.value && labelAlign.value !== 'top') { @@ -322,13 +322,28 @@ export default defineComponent({ }; const setValidateMessage = (validateMessage: FormItemValidateMessage[]) => { - if (!validateMessage && !isArray(validateMessage)) return; + if (!validateMessage || !isArray(validateMessage)) return; + errorList.value = []; + successList.value = []; if (validateMessage.length === 0) { - errorList.value = []; verifyStatus.value = ValidateStatus.SUCCESS; + return; } - errorList.value = validateMessage.map((item) => ({ ...item, result: false })); - verifyStatus.value = ValidateStatus.FAIL; + const errors = validateMessage.filter( + (item) => item.type === 'error' || item.type === 'warning', + ) as FormItemValidateMessage[]; + const successes = validateMessage.filter((item) => item.type === 'success') as FormItemValidateMessage[]; + errorList.value = errors.map((item) => ({ + message: item.message, + type: item.type as 'error' | 'warning', + result: false, + })); + successList.value = successes.map((item) => ({ + message: item.message, + type: item.type as 'success', + result: true, + })); + verifyStatus.value = errors.length > 0 ? ValidateStatus.FAIL : ValidateStatus.SUCCESS; }; const value = computed(() => form?.data && lodashGet(form?.data, props.name)); diff --git a/packages/components/form/form.en-US.md b/packages/components/form/form.en-US.md index d15bfd4f0d..deb04dc42c 100644 --- a/packages/components/form/form.en-US.md +++ b/packages/components/form/form.en-US.md @@ -42,7 +42,7 @@ name | params | return | description -- | -- | -- | -- clearValidate | `(fields?: Array)` | \- | required reset | `(params?: FormResetParams)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`interface FormResetParams { type?: 'initial' \| 'empty'; fields?: Array }`
-setValidateMessage | `(message: FormValidateMessage)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`type FormValidateMessage = { [field in keyof FormData]: FormItemValidateMessage[] }`

`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`
+setValidateMessage | `(message: FormValidateMessage)` | \- | required。Sets custom validation results, such as directly displaying remote validation messages. Note: This method must be called after the component is mounted. `FormData` refers to the generic type of form data。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`type FormValidateMessage = { [field in keyof FormData]: FormItemValidateMessage[] }`

`interface FormItemValidateMessage { type: 'warning' \| 'error' \| 'success'; message: string }`
submit | `(params?: { showErrorMessage?: boolean })` | \- | required validate | `(params?: FormValidateParams)` | `Promise>` | required。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`interface FormValidateParams { fields?: Array; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`

`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`
validateOnly | `(params?: Pick)` | `Promise>` | required diff --git a/packages/components/form/form.md b/packages/components/form/form.md index 0f9c978c05..df907c3551 100644 --- a/packages/components/form/form.md +++ b/packages/components/form/form.md @@ -44,7 +44,7 @@ validate | `(result: ValidateResultContext)` | 校验结束后触发 -- | -- | -- | -- clearValidate | `(fields?: Array)` | \- | 必需。清空校验结果。可使用 fields 指定清除部分字段的校验结果,fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例:`clearValidate(['email'])` reset | `(params?: FormResetParams)` | \- | 必需。重置表单,表单里面没有重置按钮`