[form]表单组件是否可以提供一个自定义错误设置功能

[fangjc1986]

需求来源

1. 比如说添加一个用户的表单，username 前端检查字符串格式，但是提交的时候可能存在 username 重复的现象；
2. 当 username 重复的时候， 后端会返回类似这样的验证错误信息: { username : "此用户名已存在" } ;
3. 我希望将错误信息放在表单 username 输入框的下方以提示用户；

当前处理方案

1. 通过 validator 的异步校验方式进行校验，但是这样就需要后端提供一个额外的接口专门做校验，且在提交表单的时候的校验错误无法传递到表单上；

其他框架已有的处理方案

1. arco-design 在 form 组件上提供了 setFields 的额外功能，用于设置某个字段的当前状态，从而可以将服务器返回的错误信息手动添加到 form 表单上；

结论与需求

1. 建议 element-plus 也可以提供类似的 setFields 的方法来手动设置表单状态；

实现代码示例

<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";

const formRef = ref();
const form = ref({
  username: "",
});

axios
  .post("/api/user/save", form.value)
  .then((resp: any) => {
    console.log("保存成功");
  })
  .catch((err: object) => {
    // 当出现表单验证错误时，将错误信息设置到表单中
    // err : { username : "用户名已存在" }
    formRef.value.setFields(
      Object.keys(err).reduce((t, k) => {
        t[k] = {
          status: "error",
          message: err[k],
        };
        return t;
      }, {}),
    );
  });
</script>

<template>
  <el-form ref="formRef">
    <el-form-item prop="username" label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
  </el-form>
</template>

<style scoped></style>

[yangmiao7]

[fangjc1986]

已经提交 PR， 不知道什么时候能过

#14017

[gimjin]

不是有自定义表单校验吗？demo 里面就是用 setTimeout 模拟了异步请求。

[fangjc1986]

1. 比如自定义校验如果成功了，但是最后提交表单之后，后端接口再次校验发现问题，此时如何展示错误；
2. 一般后端会在提交的时候校验字段的合法性，可能根据各种不同的逻辑进行校验，如果可以将提交返回的校验错误在表单上直接展示，后端就可以不用额外添加一个校验接口；

[gimjin]

嗯，如果后端返回失败状态，再执行 validate() 方法就会在错误的表单项下面用红色字提醒。 因为你的自定义 validate rules 已经写好了，程序会重新帮你检查你的表单，而不用手动控制。手动控制后端还要告诉你失败的字段标识位，如果运气不好有很多个表单项失败你还得循环手动设置，很麻烦。

祝你好运。

[fangjc1986]

我明白你的意思，可是这样后端不是需要额外添加用于验证的 API 接口吗？

[fangjc1986]

这些都可以封装在 axios 的 Response 拦截器中，当表单发起请求的时候，就将 formRef（Form表单组件） 对象添加到 axios 的 config 中；

当返回结果 code 状态为 字段验证失败 的时候，后端将统一返回格式： {username: "用户名重复", age: "年龄超出范围"};

之后 axios 可以直接 通过 code 码判断是否为字段验证错误，并且可以利用 config 中的 formRef，formRef.value.setValidateResults(resp.data); 来完成表单错误设置，无需在业务层做任何操作；’

[fangjc1986]

代码类似：

// 在 axios 中添加响应拦截器
axios.interceptors.response.use( response => {
// 判断是否为表单验证错误
if( resp.data.code === 120 ){
// resp.data.err : {username: "用户名重复", age: "年龄超出范围"}
 response.config.formRef.value.setValidateResults(resp.data.err);
}

// 业务层发起请求
axios.post({
  method: 'post',
  url: '......',
  formRef
}).then(....);

[staoran]

这个功能好，苦等这个功能许久了😄