fix(form): modify form component verification problem (#35)

Author: James-9696

packages/demos/app/form/auto-wordwrap.vue

@@ -5,15 +5,15 @@
       <p class="page__desc">表单（校验显示位置）</p>
     </div>
     <div class="demo-form-position-padds">
-      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px" label-position="left">
+      <tiny-form ref="ruleFormRef" :model="createData" label-width="100px" label-position="left">
         <tiny-form-item label="你真的好优秀呀！" prop="users" vertical>
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
         </tiny-form-item>
         <tiny-form-item label="你真的好优秀呀！" prop="users" vertical ellipsis>
           <tiny-input v-model="createData.user" placeholder="请输入内容" type="form"></tiny-input>
         </tiny-form-item>
         <tiny-form-item class="demo-form-item">
-          <tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>
+          <tiny-button type="primary">提交</tiny-button>
         </tiny-form-item>
       </tiny-form>
     </div>
@@ -36,20 +36,9 @@ const createData = ref({
   users: '',
   user: ''
 })
-const rules = ref({
-  users: [{ required: true, message: '必填', trigger: 'change' }]
-})
+
 const boxVisibility = ref(false)
-const formNameRef = ref()
 
-function handleSubmit(formName) {
-  // FIXIME $refs自动转换失败，请手工修改
-$refs[formName].validate((valid) => {
-    if (valid) {
-      boxVisibility.value = true
-    }
-  })
-}
 </script>
 
 <style scoped>

packages/demos/app/form/form-label-suffix.vue

@@ -8,7 +8,6 @@
       <tiny-form
         ref="ruleFormRef"
         :model="createData"
-        :rules="rules"
         label-width="100px"
         label-position="left"
         label-suffix="自定义后缀"
@@ -60,22 +59,13 @@ const createData = ref({
   users: '',
   user: ''
 })
-const rules = ref({
-  users: [{ required: true, message: '必填', trigger: 'change' }]
-})
-const formNameRef = ref()
 
 function gev() {
   console.log(createData.value.users)
 }
 
 function handleSubmit(formName) {
-  // FIXIME $refs自动转换失败，请手工修改
-$refs[formName].validate((valid) => {
-    if (valid) {
-      TinyModal.alert('提交成功')
-    }
-  })
+    TinyModal.alert('提交成功')
 }
 </script>
 

packages/demos/app/form/hide-required-asterisk.vue

@@ -19,7 +19,7 @@
           ></tiny-input>
         </tiny-form-item>
         <tiny-form-item class="demo-form-mobile-item">
-          <tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>
+          <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
         </tiny-form-item>
       </tiny-form>
     </div>
@@ -65,11 +65,10 @@ const rules = ref({
   users: [{ required: true, message: '必填', trigger: 'change' }]
 })
 const boxVisibility = ref(false)
-const formNameRef = ref()
+const ruleFormRef =  ref(null)
 
-function handleSubmit(formName) {
-  // FIXIME $refs自动转换失败，请手工修改
-$refs[formName].validate((valid) => {
+function handleSubmit() {
+  ruleFormRef.value.validate((valid) => {
     if (valid) {
       boxVisibility.value = true
     }

packages/demos/app/form/label-width.vue

@@ -5,7 +5,7 @@
       <p class="page__desc">表单（设置标签宽度）</p>
     </div>
     <div class="demo-form-label-width-padds">
-      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px" label-position="left">
+      <tiny-form ref="ruleFormRef" :model="createData"  label-width="100px" label-position="left">
         <tiny-form-item label="优秀" prop="users" vertical>
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
         </tiny-form-item>
@@ -18,9 +18,6 @@
             type="form"
           ></tiny-input>
         </tiny-form-item>
-        <tiny-form-item class="demo-form-item">
-          <tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>
-        </tiny-form-item>
       </tiny-form>
     </div>
     <tiny-dialog-box
@@ -61,24 +58,11 @@ const createData = ref({
   users: '',
   user: ''
 })
-const rules = ref({
-  users: [{ required: true, message: '必填', trigger: 'change' }]
-})
 const boxVisibility = ref(false)
-const formNameRef = ref()
-
 function gev() {
   console.log(createData.value.users)
 }
 
-function handleSubmit(formName) {
-  // FIXIME $refs自动转换失败，请手工修改
-$refs[formName].validate((valid) => {
-    if (valid) {
-      boxVisibility.value = true
-    }
-  })
-}
 </script>
 
 <style scoped>

packages/demos/app/form/validate-position.vue

@@ -61,16 +61,16 @@ const createData = ref({
   users: '',
   user: ''
 })
+const ruleFormRef =  ref(null)
 const rules = ref({
   users: [{ required: true, message: '必填', trigger: 'change' }],
   user: [{ required: true, message: '必填', trigger: 'change' }]
 })
 const boxVisibility = ref(false)
 const formNameRef = ref()
 
-function handleSubmit(formName) {
-  // FIXIME $refs自动转换失败，请手工修改
-$refs[formName].validate((valid) => {
+function handleSubmit() {
+  ruleFormRef.value.validate((valid) => {
     if (valid) {
       boxVisibility.value = true
     }

packages/demos/app/form/validate.vue

@@ -19,9 +19,9 @@
           ></tiny-input>
         </tiny-form-item>
         <tiny-form-item class="demo-form-validate-item">
-          <tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>
-          <tiny-button type="primary" @click="clearValidate('ruleForm')">移除校验</tiny-button>
-          <tiny-button type="primary" @click="resetFields('ruleForm')">重置</tiny-button>
+          <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+          <tiny-button type="primary" @click="clearValidate">移除校验</tiny-button>
+          <tiny-button type="primary" @click="resetFields">重置</tiny-button>
         </tiny-form-item>
       </tiny-form>
     </div>
@@ -63,25 +63,23 @@ const createData = ref({
   users: '',
   user: ''
 })
+const ruleFormRef =  ref(null)
 const rules = ref({
   users: [{ required: true, message: '必填', trigger: 'change' }]
 })
 const boxVisibility = ref(false)
 const formNameRef = ref()
 
-function clearValidate(formName) {
-  // FIXIME $refs自动转换失败，请手工修改
-$refs[formName].clearValidate()
+function clearValidate() {
+ruleFormRef.value.clearValidate()
 }
 
-function resetFields(formName) {
-  // FIXIME $refs自动转换失败，请手工修改
-$refs[formName].resetFields()
+function resetFields() {
+ruleFormRef.value.resetFields()
 }
 
-function handleSubmit(formName) {
-  // FIXIME $refs自动转换失败，请手工修改
-$refs[formName].validate((valid) => {
+function handleSubmit() {
+ruleFormRef.value.validate((valid) => {
     if (valid) {
       boxVisibility.value = true
     }

packages/mobile/components/form/src/renderless/index.ts

@@ -259,9 +259,9 @@ export const bindDialogEvent = ({ api, dialog, state }: Pick<IFormRenderlessPara
 }
 
 export const showTooltip =
-  ({ vm, state }: Pick<IFormRenderlessParams, 'vm' | 'state'>) =>
+  ({ parent, state }: Pick<IFormRenderlessParams, 'parent' | 'state'>) =>
   (dom: HTMLElement, val: string): void => {
-    const tooltip = vm.$refs.tooltip
+    const tooltip = parent.$refs.tooltip
     tooltip.state.referenceElm = dom
     tooltip.state.popperElm && (tooltip.state.popperElm.style.display = 'none')
     tooltip.doDestroy()

packages/mobile/components/form/src/renderless/vue.ts

@@ -102,7 +102,7 @@ export const renderless = (
     registerLabelWidth: registerLabelWidth({ api, state }),
     deregisterLabelWidth: deregisterLabelWidth({ api, state }),
     watchRules: watchRules({ api, props, state }),
-    showTooltip: showTooltip({ vm, state }),
+    showTooltip: showTooltip({ parent, state }),
     hideTooltip: hideTooltip({ state })
   })
 

packages/theme-mobile/src/form-item/index.less

@@ -16,6 +16,7 @@
 
 @form-item-prefix-cls: ~'@{css-prefix}mobile-form-item';
 @input-prefix-cls: ~'@{css-prefix}mobile-input';
+@input-form-prefix-cls: ~'@{css-prefix}mobile-input-form';
 @input-group-prefix-cls: ~'@{css-prefix}mobile-input-group';
 @textarea-prefix-cls: ~'@{css-prefix}mobile-textarea';
 @button-prefix-cls: ~'@{css-prefix}mobile-button';
@@ -116,7 +117,7 @@
   .is-vertical {
     border-bottom: 1px solid #ddd;
   }
-
+ 
   &__error {
     color: var(--tvm-FormItem-error-text-color);
     font-size: 12px;
@@ -134,6 +135,13 @@
     display: inline-block;
     margin-left: 10px;
   }
+  
+  .@{input-form-prefix-cls} {
+    &__error {
+      color: var(--tvm-FormItem-error-text-color);
+      font-size: 12px;
+    }
+  }
 
   &.is-required:not(.is-no-asterisk) {
     .@{form-item-prefix-cls}__label-wrap > .@{form-item-prefix-cls}__label:before,
@@ -150,6 +158,7 @@
     .@{textarea-prefix-cls}__inner,
     .@{textarea-prefix-cls}__inner:focus {
       border-color: var(--tvm-FormItem-error-border-color);
+      background-color: var(--tvm-FormItem-error-bg-color);
     }
 
     .@{input-group-prefix-cls}__append,
@@ -167,6 +176,7 @@
       &,
       &:focus {
         border-color: var(--tvm-FormItem-error-border-color);
+        background-color: var(--tvm-FormItem-error-bg-color);
       }
     }
   }

packages/theme-mobile/src/form-item/vars.less

@@ -1,6 +1,7 @@
 .inject-FormItem-vars() {
   --tvm-FormItem-label-text-color: var(--tvm-color-text, #191919);
-  --tvm-FormItem-error-text-color: var(--tvm-color-error-text, #f23030);
-  --tvm-FormItem-error-border-color: var(--tvm-color-error-border, #f23030);
-  --tvm-FormItem-error-icon-color: var(--tvm-color-error-icon, #f23030);
+  --tvm-FormItem-error-text-color: var(--tvm-color-error-text);
+  --tvm-FormItem-error-border-color: var(--tvm-color-error-border);
+  --tvm-FormItem-error-icon-color: var(--tvm-color-error-icon);
+  --tvm-FormItem-error-bg-color: var(--tvm-color-error-bg-light);
 }