Validation when mount the component

[Ellathet]

I don't want validation on mount

When my component mounts event with option validateOnMount=false, it validates anyway.
Look my code:

<script setup lang="ts">
  import { useForm } from 'vee-validate';
  import * as yup from 'yup';
  
  const schema = {
    name: yup.string()
      .min(3, "Seu nome deve conter no mínimo 3 letras")
      .max(50, "Seu nome deve conter no máximo 50 letras")
      .required("É preciso informar um nome"),
  }

  const { errors, handleSubmit, isSubmitting, useFieldModel} = useForm<{
    name: string;
  }>({
    validationSchema: yup.object().shape({
      name: schema.name,
    }),
    validateOnMount: false,
  })

  const name = useFieldModel('name')
 
  const onSubmit = handleSubmit((values, actions) => {
    actions.resetForm()
  });
 
</script>

<template>
<form @submit="onSubmit">
        <b-row>
          <b-col>
            <b-form-group
              id="input-group-1"
              label="Full Name"
              label-for="input-name"
            >
              <b-form-input
                id="input-name"
                v-model="name"
                :class="{invalid: errors.name}"
                type="text"
                placeholder="Write yout name"
                autocomplete="name"
              />
              <b-form-invalid-feedback
                v-if="errors.name"
                :state="errors.name"
              >
                {{ errors.name }}
              </b-form-invalid-feedback>
            </b-form-group>
          </b-col>
        <b-row class="px-5">
          <b-col>
            <b-button
              type="submit"
              :disabled="isSubmitting"
            >
              Send Form
            </b-button>
          </b-col>
        </b-row>
      </form>
</template>

The problem is whenever the component mount it comes back with errors in my form:

Is there a way to disable this mount validation when mount?

[logaretm]

At the moment useFieldModel doesn't respect any configuration because it does not represent fields. Just value paths, so vee-validate then must report the field errors at all times because it lacks any other signals like touched which is important for deciding when a field value should change.

This is why useField has validation triggers while useFieldModel does not.

I'm still figuring out how to work the useFieldModel API to be less confusing, especially in comparison to useField. So expect this behavior to be changed soon.

[Ellathet]

I don't know if it's right, but I used both useForm and useField. So at the beginning it validates by field, and when I submit it validates by schema:

const { handleSubmit, isSubmitting } = useForm<{
    name: string;
  }>({
    validationSchema: yup.object().shape({
      name: schema.name,
    }),
    validateOnMount: false,
  })

 const { 
    value: name, 
    errorMessage: errorNameMessage 
  } = useField<string>('name', schema.name)

  const onSubmit = handleSubmit((values, actions) => {
    // submit my form
  });

Thanks for helping! 🥰

[gaoyusongcn]

Hi @logaretm @Ellathet I'm bitten as well.
Do you have any good ide to handing this problem?

[Ellathet]

I just started using useField, instead useFieldModel. I didn't find any other solution

[gaoyusongcn]

o(╥﹏╥)o alright