From 1bd47cfd09c9d6d0563fdf0c38790c7c20c4fc4e Mon Sep 17 00:00:00 2001 From: chenxiaofie Date: Tue, 28 Mar 2023 16:44:27 +0800 Subject: [PATCH 1/2] Fix form error style for input addonAfter slot (#6374) * fix(FormITem): add one propType, add disableElement,edit style --- components/form/FormItem.tsx | 7 ++++++- components/form/style/index.less | 16 ++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 64b2fa29ba..38892d2321 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -102,6 +102,7 @@ export const formItemProps = () => ({ messageVariables: { type: Object as PropType> }, hidden: Boolean, noStyle: Boolean, + disabled: Boolean, }); export type FormItemProps = Partial>>; @@ -250,7 +251,9 @@ export default defineComponent({ ); validateState.value = 'validating'; errors.value = []; - + if (props.disabled) { + return Promise.resolve(); + } promise .catch(e => e) .then((results: RuleError[] = []) => { @@ -408,6 +411,8 @@ export default defineComponent({ v-slots={{ default: () => ( <> + {/* disable */} + {props.disabled ?
: ''} {/* Label */} Date: Tue, 28 Mar 2023 17:34:27 +0800 Subject: [PATCH 2/2] docs(upload): formItem prop `disabled` (#6374) --- components/form/index.en-US.md | 1 + components/form/index.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 0f71cbadf3..5843a2814f 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -75,6 +75,7 @@ A form consists of one or more form fields whose type includes input, textarea, | --- | --- | --- | --- | --- | | autoLink | Whether to automatically associate form fields. In most cases, you can use automatic association. If the conditions for automatic association are not met, you can manually associate them. See the notes below. | boolean | true | | | colon | Used with `label`, whether to display `:` after label text. | boolean | true | | +| disabled | Whether to disable Item and skip rule verification | boolean | false | | | extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|slot | | | | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false | | | help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|slot | | | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index a59ac13e83..2238f064f2 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -76,6 +76,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg | --- | --- | --- | --- | --- | | autoLink | 是否自动关联表单域,对于大部分情况都可以使用自动关联,如果不满足自动关联的条件,可以手动关联,参见下方注意事项 | boolean | true | | | colon | 配合 label 属性使用,表示是否显示 label 后面的冒号 | boolean | true | | +| disabled | 是否禁用 Item 并跳过 rule 验证 | boolean | false | | | extra | 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 | string\|slot | | | | hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false | | | help | 提示信息,如不设置,则会根据校验规则自动生成 | string\|slot | | |