diff --git a/packages/nutui-taro-demo/src/dentry/pages/form/index.vue b/packages/nutui-taro-demo/src/dentry/pages/form/index.vue index e709a55d91..f11c15f9d5 100644 --- a/packages/nutui-taro-demo/src/dentry/pages/form/index.vue +++ b/packages/nutui-taro-demo/src/dentry/pages/form/index.vue @@ -48,6 +48,7 @@ :model-value="formData" :rules="{ name: [ + { required: true, message: '请填写姓名' }, { message: 'Name should be at least two characters', validator: nameLengthValidator @@ -55,7 +56,7 @@ ] }" > - + { 'nut-form-item': FormItem }, template: ` - - + + { } }); + const form1 = wrapper.find('.nut-cell__title'); + expect(form1.classes()).toContain('required'); // .nut-input-text const formitem: DOMWrapper = 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 index 71f347c8ed..133009c515 100644 --- a/src/packages/__VUE/form/demo.vue +++ b/src/packages/__VUE/form/demo.vue @@ -67,6 +67,7 @@ :model-value="formData" :rules="{ name: [ + { required: true, message: translate('nameTip') }, { message: '名称两个字以上', validator: nameLengthValidator @@ -74,12 +75,7 @@ ] }" > - + - + - + - + {{ label }} @@ -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 }; } }); diff --git a/src/packages/__VUE/formitem/index.vue b/src/packages/__VUE/formitem/index.vue index 408b7fb1c3..396cf90602 100644 --- 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 }" > {{ label }} @@ -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 }; } });