V4 How to validate dynamic form using useField?

[e1uone]

I have a dynamic form where loginField can be replaced with phoneField, I am using v-if for that. I would like to be able to dynamically disable validation for one of the fields, or at least dynamically set validation rules, but how can I achieve this without using schemas?

My dynamic form area looks like this:

            <q-input
              v-if="registrationType == `login`"
              class="col-12"
              name="login"
              v-model="login"
              :label="$t(`signupPage.loginField`)"
              autocomplete="true"
              :error-message="errors.login"
              :error="!!errors.login"
            />
            <q-input
              v-else
              class="col-12"
              name="phone"
              v-model="phone"
              :label="$t(`signupPage.phoneField`)"
              autocomplete="true"
              :error-message="errors.phone"
              :error="!!errors.phone"
            />

My fields:

    const { value: phone } = useField("phone", "required", { form });
    const { value: login } = useField("login", "required|email", { form });

I'm using handleSubmit function to validate all fields:

    const onSubmit = handleSubmit((values, { resetForm }) => {
      //sends data to server
      resetForm();
    });

The only thing that comes to mind is to delete and create the loginField and phoneField dynamically via the watcher.

[logaretm]

Since it is hard to call useField conditionally (or any composition API for that matter), you are better off creating a custom q-input component that has useField baked into it.

Otherwise, you have to use dynamic schemas with computed properties, or computed rules.