How to use a certain value to control whether it is required

[han1548772930]

When I use a certain value to control whether a field is required, how can I implement the following example?

<script setup lang="ts">
import { h } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'

import { Button } from '@/components/ui/button'
import {
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from '@/components/ui/form'
import { Switch } from '@/components/ui/switch'
import { toast } from '@/components/ui/toast'
import {Input} from "@/components/ui/input";

const formSchema = toTypedSchema(z.object({
  marketing_emails: z.boolean().default(false).optional(),
  security_emails: z.string().min(1),
}))

const { handleSubmit } = useForm({
  validationSchema: formSchema,
  initialValues: {
    security_emails: "",
  },
})

const onSubmit = handleSubmit((values) => {
  toast({
    title: 'You submitted the following values:',
    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
  })
})
</script>

<template>
  <form class="w-full space-y-6" @submit="onSubmit">
      <div class="space-y-4">
        <FormField v-slot="{ value, handleChange }" name="marketing_emails">
          <FormItem class="flex flex-row items-center justify-between rounded-lg border p-4">

            <FormControl>
              <Switch
                  :checked="value"
                  @update:checked="handleChange"
              />
            </FormControl>
          </FormItem>
        </FormField>
        <FormField v-slot="{ componentField }" name="security_emails">
          <FormItem>
            <FormControl>
              <Input type="text" placeholder="shadcn" v-bind="componentField" />
            </FormControl>
            <FormMessage />
          </FormItem>
        </FormField>
      </div>
    <Button type="submit">
      Submit
    </Button>
  </form>
</template>