forms - (Vue) Ant Design 使用 v-decorator 以 Ant 的形式显示客户端和服务器端验证

Question

我用过 Ant 设计的表单组件与 v-decorators用于验证表单，我想显示客户端(我目前已完成的 v-decorator 规则验证)以及服务器端表单数据验证。

将此视为示例登录表单:

<template>
  <AForm
    :form="form"
    @submit.prevent="handleSubmit"
  >
    <FormItem>
      <AInput
        v-decorator="['email', { rules: [{ required: true, message: 'Please input your email!' }] }]"
        placeholder="Email"
      />
    </FormItem>
    <FormItem>
      <AInput
        v-decorator="['password', { rules: [{ required: true, message: 'Please input your Password!' }] }]"
        placeholder="Password"
        type="password"
      />
    </FormItem>
    <FormItem>
      <AButton
        html-type="submit"
        class="w-full"
        :loading="loading"
      >
        Log in
      </AButton>
    </FormItem>
  </AForm>
</template>

<script>
import { Form, Input, Button } from 'ant-design-vue';
import { mapActions } from 'vuex';

export default {
  components: {
    AForm: Form,
    FormItem: Form.Item,
    AInput: Input,
    AButton: Button,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      errors: {},
      loading: false,
    };
  },
  methods: {
    ...mapActions(['login']),
    handleSubmit() {
      this.errors = {};
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          this.login(values)
            .then(() => {
              this.$router.push('/');
            })
            .catch(({ response = {}, message }) => {
              const { errors } = response.data;
              if (errors) {
                this.errors = errors; // I want to display these errors
                return;
              }
              this.$notify.error(message || 'Unable to login');
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

我已经将表单数据提交到 Laravel 服务器，最终我会得到一些验证错误，我需要将这些错误显示到 ant 的表单中。我的验证错误对象如下所示:

{
    errors: {
        email: "The email must be a valid email address.",
        password: "(some validation message here)"
    }
}

我不想失去 ant 的表单验证功能，我还想同时显示服务器端验证错误。有什么办法可以在 vue 中实现这一点吗？

Answer 1

您可以使用 setFields设置错误状态的表单方法。

this.login(values)
.then(() => {
    this.$router.push('/');
})
.catch(({
        response = {},
        message
    }) => {
        const {
            errors
        } = response.data;
        if (errors) {
            this.form.setFields({
                'email': {
                    errors: [{
                        "message": errors.email,
                        "field": "email"
                    }]
                },
                'password': {
                    errors: [{
                        "message": errors.password,
                        "field": "password"
                    }]
                }
            });
            return;
        }