Any way to remove a usefield with Composition Api?

[UnTalPeluca]

Im using <script setup> and Yup to make a form. I have a simple form that is used for Login or signup, when it is used as a signup I show a 3rd field for the Nickname. The problem is that when I hide it I still need to fulfill the rules like required, minimum, etc, it is also shown in handleSubmit. How could I make it dynamic? the destructuring for each useField confuses me a bit when trying. or Any way to remove it from the useForm?

[logaretm]

There isn't a way to do that at the moment since this isn't the recommended way to use useField. It is meant to be used as part of a component that is your custom input.

I'm working on an enhancement for 4.6 where you can generate form models directly and avoid calling useField if you plan to use it in that way.

As a workaround you can experiment with conditional rules with .when on Yup API

[UnTalPeluca]

Thank you very much for helping, I thought I was missing something. I'll take a look at the link

[jdinartejesus]

@logaretm how is the progress on this v4.6? I'm also looking for something on this lie with form models.

[logaretm]

@jdinartejesus It's already out a couple of weeks ago. Here is the doc page.

[jdinartejesus]

I looked at it and still don't know how to have something like this:
Where I could have a v-model that's making form controlled and watchable from outside the component created with useForm().

<template>
     <Form v-model="controlledForm" initial-values="initialValues" >
        <Field type="text" name="first_name" />
    </Form>
</template>

<script setup>

   const initialValues = {
       first_name: "Foo"
   }

   const controlledForm = reactive({ 
      first_name: null
   });

   function doesSomethingWithName(Name) {
       form.first_name = Name + "A"
   }

 watch(() => form.first_name, (newVal) => doesSomethingWithName(newVal));

</script>

[Liwoj]

Can be a solution to use reactive schema as described in Reactive Form Schema example?