Ver código fonte

fix(demo->customerForm): FormItem下有多个受控组件控制台显示错误提示的bug (#3238)

* fix: FormItem下有多个受控组件控制台显示错误提示的bug

* chore(demo->customerForm): use Promise in rule validator

---------

Co-authored-by: invalid w <wangjuesix@gmail.com>
open-carp 1 ano atrás
pai
commit
ec646c57b8
1 arquivos alterados com 20 adições e 12 exclusões
  1. 20 12
      src/views/demo/form/CustomerForm.vue

+ 20 - 12
src/views/demo/form/CustomerForm.vue

@@ -23,17 +23,17 @@
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
   import { CollapseContainer } from '/@/components/Container/index';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { Input, FormItem, Select } from 'ant-design-vue';
+  import { Input, FormItem, FormItemRest, Select } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
 
   const custom_typeKey2typeValueRules = (model) => {
     return [
       {
         required: true,
-        validator: (rule, value, callback) => {
-          if (!model.typeKey) return callback('请选择类型');
-          if (!model.typeValue) return callback('请输入数据');
-          callback();
+        validator: async () => {
+          if (!model.typeKey) return Promise.reject('请选择类型');
+          if (!model.typeValue) return Promise.reject('请输入数据');
+          Promise.resolve();
         },
       },
     ];
@@ -145,7 +145,13 @@
               <Select.Option value="测试名称">测试名称</Select.Option>
             </Select>
             <FormItem name="typeValue2" class="local_typeValue" rules={[{ required: true }]}>
-              <Input placeholder="请输入" v-model:value={model['typeValue2']} disabled={disabled} />
+              <FormItemRest>
+                <Input
+                  placeholder="请输入"
+                  v-model:value={model['typeValue2']}
+                  disabled={disabled}
+                />
+              </FormItemRest>
             </FormItem>
           </Input.Group>
         );
@@ -183,12 +189,14 @@
                 <Select.Option value="公司名称">公司名称</Select.Option>
                 <Select.Option value="产品名称">产品名称</Select.Option>
               </Select>
-              <Input
-                style="width: calc(100% - 120px); margin-left: -1px;"
-                placeholder="请输入"
-                v-model:value={model['typeValue']}
-                disabled={disabled}
-              />
+              <FormItemRest>
+                <Input
+                  style="width: calc(100% - 120px); margin-left: -1px;"
+                  placeholder="请输入"
+                  v-model:value={model['typeValue']}
+                  disabled={disabled}
+                />
+              </FormItemRest>
             </Input.Group>
           </FormItem>
         );