ant design vue的form表单如何取值

在使用 Ant Design Vue 开发前端项目时，a-form 表单组件是一个非常常用的组件。它提供了丰富的表单控件和验证功能，能够帮助我们快速构建复杂的表单页面。在实际开发中，我们经常需要获取表单中的数据，以便进行后续的处理或提交。本文将详细介绍如何在 Ant Design Vue 中获取表单的值。

1. 使用 v-model 绑定表单数据

在 Ant Design Vue 中，a-form 表单组件通常与 a-form-item 和 a-input 等表单控件一起使用。我们可以通过 v-model 指令将表单控件与 Vue 实例中的数据进行双向绑定，从而轻松获取表单的值。

<template>
  <a-form :model="form" @submit="handleSubmit">
    <a-form-item label="用户名">
      <a-input v-model:value="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input v-model:value="form.password" type="password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const form = reactive({
      username: '',
      password: '',
    });

    const handleSubmit = () => {
      console.log('表单数据:', form);
    };

    return {
      form,
      handleSubmit,
    };
  },
});
</script>

在上面的代码中，我们通过 v-model:value 将 a-input 控件的值与 form 对象中的 username 和 password 属性进行绑定。当用户输入内容时，form 对象中的数据会自动更新。在 handleSubmit 方法中，我们可以直接访问 form 对象来获取表单的值。

2. 使用 ref 获取表单实例

除了使用 v-model 绑定数据外，我们还可以通过 ref 获取表单实例，然后调用表单实例的方法来获取表单的值。

<template>
  <a-form ref="formRef" :model="form" @submit="handleSubmit">
    <a-form-item label="用户名">
      <a-input v-model:value="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input v-model:value="form.password" type="password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const form = reactive({
      username: '',
      password: '',
    });

    const formRef = ref(null);

    const handleSubmit = () => {
      formRef.value.validate().then(() => {
        console.log('表单数据:', form);
      }).catch(error => {
        console.log('表单验证失败:', error);
      });
    };

    return {
      form,
      formRef,
      handleSubmit,
    };
  },
});
</script>

在上面的代码中，我们通过 ref 获取了 a-form 组件的实例，并在 handleSubmit 方法中调用了 validate 方法。validate 方法会验证表单中的所有控件，如果验证通过，则会返回一个 Promise，我们可以在 then 中获取表单的值。

3. 使用 getFieldsValue 方法获取表单值

a-form 组件还提供了一个 getFieldsValue 方法，可以用来获取表单中所有控件的值。这个方法返回一个对象，包含了表单中所有控件的值。

<template>
  <a-form ref="formRef" :model="form" @submit="handleSubmit">
    <a-form-item label="用户名">
      <a-input v-model:value="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input v-model:value="form.password" type="password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const form = reactive({
      username: '',
      password: '',
    });

    const formRef = ref(null);

    const handleSubmit = () => {
      const values = formRef.value.getFieldsValue();
      console.log('表单数据:', values);
    };

    return {
      form,
      formRef,
      handleSubmit,
    };
  },
});
</script>

在上面的代码中，我们通过 getFieldsValue 方法获取了表单中所有控件的值，并将其打印到控制台中。

4. 使用 validateFields 方法获取表单值并验证

a-form 组件还提供了一个 validateFields 方法，可以用来获取表单中所有控件的值，并在获取值之前进行验证。如果验证通过，则会返回一个 Promise，我们可以在 then 中获取表单的值。

<template>
  <a-form ref="formRef" :model="form" @submit="handleSubmit">
    <a-form-item label="用户名">
      <a-input v-model:value="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input v-model:value="form.password" type="password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const form = reactive({
      username: '',
      password: '',
    });

    const formRef = ref(null);

    const handleSubmit = () => {
      formRef.value.validateFields().then(values => {
        console.log('表单数据:', values);
      }).catch(error => {
        console.log('表单验证失败:', error);
      });
    };

    return {
      form,
      formRef,
      handleSubmit,
    };
  },
});
</script>

在上面的代码中，我们通过 validateFields 方法获取了表单中所有控件的值，并在获取值之前进行了验证。如果验证通过，则会返回一个 Promise，我们可以在 then 中获取表单的值。

5. 总结

在 Ant Design Vue 中，获取表单的值有多种方式，可以根据实际需求选择合适的方法。通过 v-model 绑定数据是最简单的方式，适合简单的表单场景。通过 ref 获取表单实例并使用 getFieldsValue 或 validateFields 方法可以更灵活地获取表单的值，并可以在获取值之前进行验证。

无论使用哪种方式，Ant Design Vue 都提供了丰富的 API 来帮助我们轻松地获取表单的值，并进行后续的处理或提交。希望本文能帮助你更好地理解和使用 Ant Design Vue 中的表单组件。