Ant-design中表单多级对象做嵌套表单校验

最新推荐文章于 2024-10-04 20:17:33 发布

阿阿阿尔呀

最新推荐文章于 2024-10-04 20:17:33 发布

阅读量898

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/aerbaba/article/details/138134547

版权

本文介绍了如何在Vue应用中使用AntDesignVue的useFormhook，动态绑定FormItem组件，并通过validateInfos传递自定义的formData和rules进行输入验证的过程。

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

在 useForm中拿到一个validateInfos，并传入formData和rules，在FormItem中绑定name名

完整代码如下

<template>
    <Form class="enter-x pt-4" :model="formData" ref="formRef">
        <Row>
            <Col class="mb-3" :span="24">
              <FormItem class="w-24 inline-block align-middle mb-0 mr-3" v-bind="validateInfos['sysOperElectric.green_min_rate']">
                <InputNumber
                  v-model:value="formData.sysOperElectric.green_min_rate"
                  :placeholder="t('routes.operConfig.min')"
                />
              </FormItem>
              <span class="mx-2 text-sm text-slate-400">~</span>
              <FormItem class="w-24 inline-block align-middle mb-0 mr-3" v-bind="validateInfos['sysOperElectric.green_max_rate']">
                <InputNumber
                  v-model:value="formData.sysOperElectric.green_max_rate"
                  :placeholder="t('routes.operConfig.max')"
                />
              </FormItem>
            </Col>
           </Row>
    </Form>
</template>
<script setup lang="ts">
  import { Card, Form, InputNumber, Button, Row, Col, Switch } from 'ant-design-vue';
  import { ref, reactive } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { integerRule } from '@/utils/validate';

  const FormItem = Form.Item;
  let formData = reactive({
    sysOperElectric: {
      greenMaxRate: undefined,
      greenMinRate: undefined,
      orangeMaxRate: undefined,
      orangeMinRate: undefined,
      redMaxRate: undefined,
      redMinRate: undefined,
    }
  })

  const useForm = Form.useForm;
  const { validateInfos, validate } = useForm(
    formData,
    reactive({
      'sysOperElectric.greenMaxRate': integerRule(),
      'sysOperElectric.greenMinRate': integerRule(),
    })
  )
  function handleSubmit() {
    validate().then((res) => {
        // submit
    })
  }