feat(form-item): required 样式支持由 rules 控制 (#2637) (#2640)

jdf2e · Nov 17, 2023 · d5b8715 · d5b8715
1 parent e5dcce6
commit d5b8715
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 18 deletions.
diff --git a/packages/nutui-taro-demo/src/dentry/pages/form/index.vue b/packages/nutui-taro-demo/src/dentry/pages/form/index.vue
@@ -48,14 +48,15 @@
       :model-value="formData"
       :rules="{
         name: [
+          { required: true, message: '请填写姓名' },
           {
             message: 'Name should be at least two characters',
             validator: nameLengthValidator
           }
         ]
       }"
     >
-      <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
+      <nut-form-item label="姓名" prop="name">
         <nut-input
           v-model="formData.name"
           class="nut-input-text"

diff --git a/src/packages/__VUE/form/__tests__/index.spec.ts b/src/packages/__VUE/form/__tests__/index.spec.ts
@@ -190,8 +190,8 @@ describe('Form', () => {
         'nut-form-item': FormItem
       },
       template: `
-      <nut-form :model-value="formData" ref="ruleForm">
-        <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
+      <nut-form :model-value="formData" ref="ruleForm" :rules="{name:[{ required: true, message: '请填写姓名' }]}">
+        <nut-form-item label="姓名" prop="name">
           <input
             class="nut-input-text"
             v-model="formData.name"
@@ -231,6 +231,8 @@ describe('Form', () => {
       }
     });
 
+    const form1 = wrapper.find('.nut-cell__title');
+    expect(form1.classes()).toContain('required');
     // .nut-input-text
     const formitem: DOMWrapper<Element> = wrapper.find('.nut-input-text');
     expect(formitem.exists()).toBe(true);

diff --git a/src/packages/__VUE/form/demo.vue b/src/packages/__VUE/form/demo.vue
@@ -67,19 +67,15 @@
       :model-value="formData"
       :rules="{
         name: [
+          { required: true, message: translate('nameTip') },
           {
             message: '名称两个字以上',
             validator: nameLengthValidator
           }
         ]
       }"
     >
-      <nut-form-item
-        :label="translate('name')"
-        prop="name"
-        required
-        :rules="[{ required: true, message: translate('nameTip') }]"
-      >
+      <nut-form-item :label="translate('name')" prop="name">
         <nut-input
           v-model="formData.name"
           class="nut-input-text"

diff --git a/src/packages/__VUE/form/doc.en-US.md b/src/packages/__VUE/form/doc.en-US.md
@@ -144,6 +144,7 @@ const dynamicForm = {
     :model-value="formData"
     :rules="{
       name: [
+        { required: true, message: 'Please enter your name' },
         {
           message: 'Name should be at least two characters',
           validator: nameLengthValidator
@@ -152,7 +153,7 @@ const dynamicForm = {
     }"
     ref="ruleForm"
   >
-    <nut-form-item label="Name" prop="name" required :rules="[{ required: true, message: 'Please enter your name' }]">
+    <nut-form-item label="Name" prop="name">
       <nut-input
         class="nut-input-text"
         @blur="customBlurValidate('name')"

diff --git a/src/packages/__VUE/form/doc.md b/src/packages/__VUE/form/doc.md
@@ -139,6 +139,7 @@ const dynamicForm = {
     :model-value="formData"
     :rules="{
       name: [
+        { required: true, message: '请填写姓名' },
         {
           message: 'name 至少两个字符',
           validator: nameLengthValidator
@@ -147,7 +148,7 @@ const dynamicForm = {
     }"
     ref="ruleForm"
   >
-    <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
+    <nut-form-item label="姓名" prop="name">
       <nut-input
         class="nut-input-text"
         @blur="customBlurValidate('name')"

diff --git a/src/packages/__VUE/form/doc.taro.md b/src/packages/__VUE/form/doc.taro.md
@@ -139,6 +139,7 @@ const dynamicForm = {
     :model-value="formData"
     :rules="{
       name: [
+        { required: true, message: '请填写姓名' },
         {
           message: 'name 至少两个字符',
           validator: nameLengthValidator
@@ -147,7 +148,7 @@ const dynamicForm = {
     }"
     ref="ruleForm"
   >
-    <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
+    <nut-form-item label="姓名" prop="name">
       <nut-input
         class="nut-input-text"
         @blur="customBlurValidate('name')"

diff --git a/src/packages/__VUE/formitem/index.taro.vue b/src/packages/__VUE/formitem/index.taro.vue
@@ -8,7 +8,7 @@
       v-if="label || getSlots('label')"
       class="nut-cell__title nut-form-item__label"
       :style="labelStyle"
-      :class="{ required: required }"
+      :class="{ required: isRequired }"
     >
       <slot name="label">{{ label }}</slot>
     </view>
@@ -92,7 +92,17 @@ export default create({
         return { parent };
       }
     };
-    useParent();
+    const { parent: parentObj } = useParent();
+    const isRequired = computed(() => {
+      const rules = parentObj.props?.rules;
+      let formRequired = false;
+      for (const key in rules) {
+        if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+          formRequired = rules[key].some((rule: FormItemRule) => rule.required);
+        }
+      }
+      return props.required || props.rules.some((rule) => rule.required) || formRequired;
+    });
 
     const parent = inject('formErrorTip') as any;
     provide('form', {
@@ -116,7 +126,7 @@ export default create({
       } as CSSProperties;
     });
     const getSlots = (name: string) => slots[name];
-    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots };
+    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots, isRequired };
   }
 });
 </script>
diff --git a/src/packages/__VUE/formitem/index.vue b/src/packages/__VUE/formitem/index.vue
@@ -8,7 +8,7 @@
       v-if="label || getSlots('label')"
       class="nut-cell__title nut-form-item__label"
       :style="labelStyle"
-      :class="{ required: required }"
+      :class="{ required: isRequired }"
     >
       <slot name="label">{{ label }}</slot>
     </view>
@@ -92,7 +92,17 @@ export default create({
         return { parent };
       }
     };
-    useParent();
+    const { parent: parentObj } = useParent();
+    const isRequired = computed(() => {
+      const rules = parentObj.props?.rules;
+      let formRequired = false;
+      for (const key in rules) {
+        if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+          formRequired = rules[key].some((rule: FormItemRule) => rule.required);
+        }
+      }
+      return props.required || props.rules.some((rule) => rule.required) || formRequired;
+    });
 
     const parent = inject('formErrorTip') as any;
     provide('form', {
@@ -116,7 +126,7 @@ export default create({
       } as CSSProperties;
     });
     const getSlots = (name: string) => slots[name];
-    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots };
+    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots, isRequired };
   }
 });
 </script>