场景
我们提交表单,但是后端未通过并且返回报错信息,我们如何将下面的信息显示在表单上呢?
1 2 3 4 5 6
| { "error": { "email": ["邮箱已经存在"], "password": ["密码过于简单"] } }
|
解决方法
我们需要使用到 Form.Item 中的 help
和 validateStatus
俩接口来实现信息显示
help
提示信息
validateStatus
校验状态
我们来写个 hook
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
|
import { ref, unref } from "vue";
type ReturnType = { setFeedback(feedbacks: Record<string, string[]>): void; getFeedbackBind(fieldName: string): Object; resetFeedback(): void; }; export function useFormFeedback(): ReturnType { const feedbacks = ref({});
function setFeedback(feedbacksData: Record<string, string[]>) { feedbacks.value = feedbacksData; }
function getFeedbackBind(fieldName: string) { const fieldFeedback = unref(feedbacks)[fieldName]; if (fieldFeedback && fieldFeedback.length > 0) { return { help: fieldFeedback[0], "validate-status": "error", }; }
return {}; }
function resetFeedback() { feedbacks.value = []; }
return { setFeedback, getFeedbackBind, resetFeedback, }; }
|
使用
我们来看下如何使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <AForm ref="formRef" :model="formState"> <AFormItem name="email" :rules="[{ required: true, message: '请输入邮箱' }]" v-bind="getFeedbackBind('email')" > <AInput v-model:value="formState.email" /> </AFormItem> </AForm>
<script lang="ts" setup> const { setFeedback, getFeedbackBind, resetFeedback } = useFormFeedback();
ApiRequest() .then(() => { // 清空 feedback 信息 resetFeedback() }) .catch((err) => { // 设置 error 信息 setFeedback(err.data.errors); }); </script>
|