Vee-Validate 4 - 禁用另存为草稿的验证答案

【问题标题】：Vee-Validate 4 - Disable Validation for Save as DraftVee-Validate 4 - 禁用另存为草稿的验证
【发布时间】：2022-10-18 04:05:40
【问题描述】：

我有一个具有正常保存方法的表单，该方法验证并保存验证错误阻止提交。但是，我需要一个“另存为草稿”的提交，它绕过验证并提交错误。正常的保存和验证效果很好，但我似乎无法找到一种方法来轻松地动态关闭验证。

这是我现在拥有的精简版：

<template>
    <form @submit.prevent="saveForm">
        
        <!-- a bunch of custom components built around useField -->
        
        <button type="submit" @click="item.draft = true">Save as Draft</button>
        <button type="submit" @click="item.draft = false">Submit</button>
    </form>
</template>
<script setup lang="ts">
    import { useForm } from "vee-validate";
    import { reactive } from "vue";

    const { handleSubmit, isSubmitting, ...formStuff } = useForm();
    
    const item = reactive({
        draft: false
    });
    
    const saveForm = handleSubmit(async () => {
        // do stuff to save here
    })
</script>

【问题讨论】：

标签： vue.js vee-validate

【解决方案1】：

成为回答自己问题的“那个人”比只是说他们解决了问题的“那个人”更好我猜......

经过大量的挖掘和一些小的重构，我能够得到这个工作。关键是从基于字段的规则和验证更改为基于表单，因为validationSchema 是被动的。然后我可以将架构更改为false 以使表单在草稿时跳过验证。

我的设置脚本现在如下所示：

import { useForm } from "vee-validate";
import { computed, reactive } from "vue";

const submissionValidation = {
    'consult_patient_name': 'required|min:5',
    'item_name': 'required|min:2',
    'consult_question': 'required|min:5',
    'consult_history': 'required|min:5',
};

// if it's a draft set it to false, so it can bypass validation
// otherwise set it to the actual validation schema
const validationSchema = computed(() =>
    item.draft === true
        ? false
        : submissionValidation
);

const { handleSubmit, isSubmitting } = useForm({ validationSchema });

const item = reactive({
    draft: false
});

const saveForm = handleSubmit(async () => {
    // do stuff to save here
})

【讨论】：