How to reset meta?

Hey, I see you have been working very hard on the releases for your new version, I really like it, and it’s working great so far on everything I have used it on, even though it’s in alpha. I have also now fixed all the meta tags after you have changed the meta API, also works great. 😎

I have really only one remaining question, and its how to “reset” a form programmatically from within onSubmit. I need to reset the meta fields once they submit. I want ‘dirty’ to go back to false so they have to make another fresh change before submit re-enables, errors re-appear, etc.

What would be the best way to accomplish this? Even with a nested form I don’t see how I can use it inside onSubmit

<v-form v-slot="{ meta }" :validation-schema="validationSchema" @submit="onSubmit">
  <base-input v-model="password.password" validation-key="password" type="password" label="Password" />
  <base-input v-model="password.password_confirmation" validation-key="password_confirmation" type="password" label="Confirm Password" />
  <base-button :loading="submitting" :disabled="!meta.dirty || !meta.valid">Save Changes</base-button>
</v-form>


<script>
  import { Form as VForm } from 'vee-validate';

  export default {
    components: {
      VForm,
    },
    data() {
      return {
        password: {},
        submitting: false,
        validationSchema: object({
          password: string().min(8).required().label('Password'),
          password_confirmation: string().required().oneOf([ref('password')], 'Passwords do not match').label('Password confirmation'),
        }),
      };
    },
    methods: {
      async onSubmit() {
        this.submitting = true;

        await Promise.all([
          api.patch('self/password', this.password),
        ]);

        this.password = {};
        // <------------------------ RESET FORM HERE

        this.submitting = false;
      },
    },
  };
</script>

[logaretm]

To provide some context, I ran into the opposite case in v3. There was a “silent validation” running after each reset to make sure the valid state is correct. That seemed to work fine, but that meant that forms that are empty initially are automatically invalid which depending on what you do in the UI might be aggressive for your users. So it’s like you can only pick one state or the other but you can’t have valid correct on both occasions.

There are various functions on the slot prop that you can use to set the dirty and touched flags.

https://vee-validate.logaretm.com/v4/api/form#-setfielddirty:-(field:-string,-isdirty:-boolean)-=>-void-

[logaretm]

That has been always the case, the form is invalid because the valid prop for the second field has not been verified yet.

The only difference from your example to upgrade to the latest is the submit function:

submitForm(values, actions) {
  alert("FORM SUBMITTED.... now check the input you changed");
  actions.resetForm(); // 👈 no longer nested inside `form`
},

Also the form can never be submitted while invalid, this is because vee-validate revalidates everything before submitting the form, even if it was already valid.