Is there a getError function?

[matthew-dean]

Use case

I have a model for a form that, for historical reasons, is deeply nested, but with some optional fields. What's nice about the defineField API that is returned form useForm is that it gets this deeply nested value, but how do I get the validation errors / valid state?

So, for example, I have:

const [url] = defineField('linkOptions.destinations.0.details.url')

And then I have something like:

<InputText
    v-model.trim.lazy="url"
    :invalid="errors.linkOptions?.destinations?.0?.details?.url"
    @paste="handleUrlPaste"
    placeholder="e.g. http://example.com/my-url"
  />

But this doesn't work. Not only is this errors reference, but it also has to be a flat list, according to TypeScript.

What I would really prefer is something more like:

const { model: url, error: urlError } = defineField('linkOptions.destinations.0.details.url')

<InputText
    v-model.trim.lazy="url"
    :invalid="urlError"
    @paste="handleUrlPaste"
    placeholder="e.g. http://example.com/my-url"
  />

Obviously, defineField only allows destructuring as an array (which feels like an API design mistake), but I'm wondering if there's some other API equivalent?

[matthew-dean]

Oh! It looks like useFieldError is what I want.