fix(Form): 修复表单嵌套时必填项样式设置的问题 (#499)

* docs(Form): 文档增加嵌套验证案例 * fix(Form): 修复表单嵌套时必填项样式设置的问题
WeBankFinTech · Nov 1, 2023 · 7827186 · 7827186
1 parent e8785a4
commit 7827186
Show file tree

Hide file tree

Showing 7 changed files with 287 additions and 96 deletions.
diff --git a/components/form/formItem.vue b/components/form/formItem.vue
@@ -127,16 +127,18 @@ export default defineComponent({
                     `${prefixCls}-span-${Math.ceil(props.span || span.value)}`,
                 labelPosition.value !== LABEL_POSITION.LEFT &&
                     `${prefixCls}-${labelPosition.value}`,
-                formItemRequired.value && 'is-required', // 必填校验: is-required
                 validateStatus.value === VALIDATE_STATUS.ERROR && 'is-error', // 校验错误: is-error
                 FORM_ITEM_ALIGN.includes(props.align) &&
                     `${prefixCls}-align-${props.align}`,
             ].filter(Boolean),
         );
         const formItemLabelClass = computed(() =>
-            [`${prefixCls}-label`, labelClass.value, props.labelClass].filter(
-                Boolean,
-            ),
+            [
+                `${prefixCls}-label`,
+                formItemRequired.value && 'is-required', // 必填校验: is-required
+                labelClass.value,
+                props.labelClass,
+            ].filter(Boolean),
         );
         const formItemLabelStyle = computed(() => ({
             width: pxfy(props.labelWidth || labelWidth.value),
@@ -275,6 +277,8 @@ export default defineComponent({
 
             validate,
             clearValidate,
+
+            formItemRules,
         };
     },
 });

diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -103,8 +103,8 @@
 
 .@{form-cls} {
     // formItem 必填样式 
-    .@{form-item-cls}.@{form-item-required} {
-        .@{form-item-label-cls} {
+    .@{form-item-cls} {
+        .@{form-item-label-cls}.@{form-item-required} {
             &::before {
                 display: inline-block;
                 margin-top: 2px;

diff --git a/docs/.vitepress/components/form/asyncValidator.vue b/docs/.vitepress/components/form/asyncValidator.vue
@@ -31,22 +31,17 @@
             />
         </FFormItem>
         <FFormItem label=" ">
-            <FButton
-                type="primary"
-                style="margin-right: 20px"
-                :loading="modelForm.submitLoading"
-                @click="submitHandler"
-            >
-                {{ modelForm.submitText }}
-            </FButton>
-            <FButton
-                type="primary"
-                style="margin-right: 20px"
-                @click="clearHandler"
-            >
-                清除
-            </FButton>
-            <FButton type="primary" @click="resetHandler">重置</FButton>
+            <FSpace>
+                <FButton
+                    type="primary"
+                    :loading="modelForm.submitLoading"
+                    @click="submitHandler"
+                >
+                    {{ modelForm.submitText }}
+                </FButton>
+                <FButton type="primary" @click="clearHandler"> 清除 </FButton>
+                <FButton type="primary" @click="resetHandler">重置</FButton>
+            </FSpace>
         </FFormItem>
     </FForm>
 </template>
@@ -147,14 +142,13 @@ export default {
             try {
                 modelForm.submitLoading = true;
                 modelForm.submitText = '校验中';
-                const result = await formRef.value.validate();
+                await formRef.value.validate();
                 console.log(
-                    '[form.validate] [submitHandler] 表单验证成功, result:',
-                    result,
+                    '[form.asyncValidator] [submitHandler] 表单验证成功',
                 );
             } catch (error) {
                 console.log(
-                    '[form.validate] [submitHandler] 表单验证失败, error:',
+                    '[form.asyncValidator] [submitHandler] 表单验证失败, error:',
                     error,
                 );
                 FMessage.warn('请检查表单项');

diff --git a/docs/.vitepress/components/form/complexValidate.vue b/docs/.vitepress/components/form/complexValidate.vue
@@ -1,6 +1,6 @@
 <template>
     <FForm
-        ref="WFormDomRef"
+        ref="formRef"
         labelWidth="140px"
         labelPosition="right"
         :model="modelForm"
@@ -92,17 +92,21 @@
             :key="index"
             style="display: flex; margin-left: 65px"
         >
-            {{ `场景${index + 1}名称：` }}
-            <FFormItem :prop="`scenes[${index}].name`">
+            <FFormItem
+                :prop="`scenes[${index}].name`"
+                :label="`场景${index + 1}名称：`"
+                labelWidth="80px"
+            >
                 <FInput
                     v-model="modelForm.scenes[index].name"
                     :maxlength="10"
                     @input="validateScenesCont(index)"
                 />
             </FFormItem>
-            <span style="margin-left: 10px">内容：</span>
             <FFormItem
-                :ref="(el) => (scenesDomRef[index] = el)"
+                :ref="(el) => (sceneFormItemRefList[index] = el)"
+                label="内容："
+                labelWidth="80px"
                 :prop="`scenes[${index}].content`"
                 :rules="
                     modelForm.scenes[index].name
@@ -119,21 +123,11 @@
         </div>
 
         <FFormItem label=" ">
-            <FButton
-                type="primary"
-                style="margin-right: 20px"
-                @click="submitHandler"
-            >
-                提交
-            </FButton>
-            <FButton
-                type="primary"
-                style="margin-right: 20px"
-                @click="clearHandler"
-            >
-                清除
-            </FButton>
-            <FButton type="primary" @click="resetHandler">重置</FButton>
+            <FSpace>
+                <FButton type="primary" @click="submitHandler"> 提交 </FButton>
+                <FButton type="primary" @click="clearHandler"> 清除 </FButton>
+                <FButton type="primary" @click="resetHandler">重置</FButton>
+            </FSpace>
         </FFormItem>
     </FForm>
 </template>
@@ -143,7 +137,7 @@ import { ref, reactive, computed } from 'vue';
 
 export default {
     setup() {
-        const WFormDomRef = ref(null);
+        const formRef = ref(null);
         const rePasswordRef = ref(null);
         const modelForm = reactive({
             password: '',
@@ -156,7 +150,7 @@ export default {
                 { name: '', content: '' },
             ],
         });
-        const scenesDomRef = ref([]);
+        const sceneFormItemRefList = ref([]);
 
         const validatePasswordStartWith = (rule, value) => {
             return Boolean(
@@ -219,16 +213,16 @@ export default {
         const validateScenesCont = (index) => {
             // 通过 FFormItem 的动态 ref 调用 validate 校验
             modelForm?.scenes[index]?.name
-                ? scenesDomRef.value[index].validate()
-                : scenesDomRef.value[index].clearValidate();
+                ? sceneFormItemRefList.value[index].validate()
+                : sceneFormItemRefList.value[index].clearValidate();
         };
 
         const submitHandler = async () => {
             // 通过 FForm 的 validate 直接校验
             try {
-                await WFormDomRef.value.validate();
+                await formRef.value.validate();
                 console.log(
-                    '[form.complexValidate] [submitHandler] 表单验证成功~',
+                    '[form.complexValidate] [submitHandler] 表单验证成功',
                 );
             } catch (error) {
                 console.log(
@@ -238,18 +232,18 @@ export default {
             }
         };
         const clearHandler = () => {
-            WFormDomRef.value.clearValidate();
+            formRef.value.clearValidate();
         };
         const resetHandler = () => {
-            WFormDomRef.value.resetFields();
+            formRef.value.resetFields();
         };
 
         return {
-            WFormDomRef,
+            formRef,
             rePasswordRef,
             modelForm,
             rules,
-            scenesDomRef,
+            sceneFormItemRefList,
 
             handlePasswordInput,
             validateScenesCont,

diff --git a/docs/.vitepress/components/form/index.md b/docs/.vitepress/components/form/index.md
@@ -66,6 +66,12 @@ complexValidate.vue
 asyncValidator.vue
 :::
 
+### 嵌套验证
+
+:::demo
+nestValidator.vue
+:::
+
 ## Form Props
 
 | 属性            | 说明                                                            | 类型                       | 默认值       |