Vben Admin BasicForm如何设置选项默认值，修改rules

最新推荐文章于 2024-10-31 17:04:45 发布

weixin_45518209

最新推荐文章于 2024-10-31 17:04:45 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： antdv Vben Admin 文章标签： java 前端服务器

本文链接：https://blog.youkuaiyun.com/weixin_45518209/article/details/133889222

Vben Admin 同时被 2 个专栏收录

5 篇文章

订阅专栏

antdv

3 篇文章

订阅专栏

文章讲述了如何在React应用中使用`useForm`hook来管理表单状态，并展示了如何动态更新schema和验证规则，以及如何根据`tcvType`字段值控制其他字段的启用状态，如`maxValue`在`INPUT_NUMBER`类型的切换时禁用或启用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<BasicForm @register="registerForm" />

const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
    labelWidth: 140,
    schemas: formSchema,
    showActionButtonGroup: false,
});

updateSchema([{
   field: 'tcvType',
   rules: [
      {
        validator: async (roles, value) => {
           tcvType.value = value;
        },
      },
   ],
}]);


nextTick(() => {
   setFieldsValue({ tcvType: TCV_options[0]['value'],});
});

watch(
   () => tcvType,
   () => {
      if (tcvType.value == 'INPUT_NUMBER') {
        updateSchema([
          { field: 'maxValue', componentProps: { disabled: false } },
        ]);
      } 
   },
   { deep: true },
);