fix(form): errorMessages should be reactive

[nekosaur]

Description

Alternative solution to https://github.com/vuetifyjs/vuetify/pull/15140

Here errorMessages is always reactive. Not sure if there are scenarios where you'd want the previous behaviour?

Motivation and Context

How Has This Been Tested?

Markup:

// Paste your FULL Playground.vue here

Types of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• [ ] The PR title is no longer than 64 characters.
• [ ] The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• [ ] My code follows the code style of this project.
• [ ] I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[KaelWD]

If you have an input without rules then form.valid is never true:

<template>
  <v-app>
    <v-container>
      <v-form ref="form" v-slot="{ errorMessages }" v-model="valid" @submit.prevent>
        <v-text-field :rules="rules" />
        <v-text-field :rules="rules" />
        <v-text-field />
        
        <pre>{{ { valid, errorMessages } }}</pre>

        <v-btn type="submit">Validate</v-btn>
      </v-form>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { VForm } from '../src/components'

  const rules = [
    v => !!v || 'Required',
    v => v.length < 5 || 'More than 5',
  ]

  const form = ref<VForm>()
  const valid = ref<boolean>(false)
</script>

[nekosaur]

Not sure how we want form to work. With your example, form should of course validate to true if first two inputs have valid inputs. But without writing anything in third field, should it do it "on the fly", or just when explicitly calling validate?

~For immediate valid state we'd probably need something like https://github.com/vuetifyjs/vuetify/pull/15191. The way it worked before, I was running into recursive rerenders. Maybe they can be got around, but it was difficult to debug.~

[Surof1n]

You don't always use reactive error messages, you still get errors under form elements.

[KaelWD]

No reason it shouldn't always be available though.

without writing anything in third field, should it do it "on the fly"?

Yeah if there's no rules (or error-messages) it's always valid.

v2 also had the ability to specify if you want all rules to contribute to isValid (default), or only rules from dirty fields (lay-validation). See this example: https://vuetifyjs.com/en/components/forms/#validation-with-submit-26-clear The submit button is only disabled if there is a visible validation error. If you remove lazy-validation then the button is disabled until all fields with rules are valid.