docs(form-field): add error-pattern section
#5284
Conversation
Added section on error pattern for form controls, detailing how to display validation errors for nested state values using a regular expression.
| ::component-code | ||
| --- | ||
| prettier: true | ||
| ignore: | ||
| - label | ||
| props: | ||
| label: List of IDs | ||
| error-pattern: /ids.*/ | ||
| slots: | ||
| default: | | ||
|
|
||
| <UInputTags v-model="state.ids" class="w-full" /> | ||
| --- | ||
|
|
||
| :u-input-tags{v-model="state.ids" class="w-full"} | ||
| :: |
There was a problem hiding this comment.
The ComponentCode component automatically renders the component and the code based on the provided prop, the trick here is to add a slug since we're not in the input-tags component.
| ::component-code | |
| --- | |
| prettier: true | |
| ignore: | |
| - label | |
| props: | |
| label: List of IDs | |
| error-pattern: /ids.*/ | |
| slots: | |
| default: | | |
| <UInputTags v-model="state.ids" class="w-full" /> | |
| --- | |
| :u-input-tags{v-model="state.ids" class="w-full"} | |
| :: | |
| ::component-code{slug="input-tags"} | |
| --- | |
| prettier: true | |
| ignore: | |
| - label | |
| - class | |
| props: | |
| label: List of IDs | |
| errorPattern: /ids.*/ | |
| class: 'w-full' | |
| --- | |
| :: |
There was a problem hiding this comment.
ok, I pulled that suggestion in. none of the other component-code sections on that page have slugs though...but maybe UInput is just always available?
There was a problem hiding this comment.
No sorry, my suggestion was wrong 😅 We do want to render a FormField first.
Now I'm thinking about it, it might be better to use a :component-example here with an actual FormFieldErrorPatternExample.vue component that uses a Form to show the validation.
error-pattern section
commit: |
Co-authored-by: Benjamin Canac <[email protected]>
| ::component-code{slug="input-tags"} | ||
| --- | ||
| prettier: true | ||
| ignore: | ||
| - label | ||
| - class | ||
| props: | ||
| label: List of IDs | ||
| errorPattern: /^ids\..*/ | ||
| class: 'w-full' |
There was a problem hiding this comment.
| ::component-code{slug="input-tags"} | |
| --- | |
| prettier: true | |
| ignore: | |
| - label | |
| - class | |
| props: | |
| label: List of IDs | |
| errorPattern: /^ids\..*/ | |
| class: 'w-full' | |
| ::component-code{slug="input-tags-form-field-example"} | |
| --- | |
| prettier: true |
The documentation example uses slug="input-tags" but specifies FormField props (label, errorPattern), which don't belong to the InputTags component. This mismatch will likely cause the example to not render correctly.
View Details
Analysis
FormField documentation uses wrong component slug causing props mismatch
What fails: Line 150 in docs/content/docs/2.components/form-field.md uses ::component-code{slug="input-tags"} with FormField props (label, errorPattern) that don't exist on UInputTags component
How to reproduce:
- Open
docs/content/docs/2.components/form-field.mdline 150 - The
::component-code{slug="input-tags"}tries to render UInputTags component - Props
label: "List of IDs"anderrorPattern: /^ids\..*\/are passed but UInputTags only accepts props likemodelValue,placeholder,disabled, etc.
Result: Component code example shows InputTags without FormField wrapper, ignoring the label and errorPattern props that are central to this documentation section
Expected: Should show InputTags properly wrapped in FormField to demonstrate the errorPattern feature, using existing input-tags-form-field-example component
Fix: Changed slug from input-tags to input-tags-form-field-example to reference the correct example component that demonstrates InputTags within FormField context
There was a problem hiding this comment.
@benjamincanac - is this more correct than your suggestion about the slug? I'm not sure exactly how these slugs and component-code things work
|
oh wow, that's super neat! you can see how the docs rendered here: https://ui-5tsvjco9r-nuxt-js.vercel.app/docs/components/form-field#error-pattern |
Added 'name' prop and 'errorPattern' to UInputTags example.
|
ok, @benjamincanac - it looks like this now: |
| This sets the `color` to `error` on the form control. You can change it globally in your `app.config.ts`. | ||
| :: | ||
|
|
||
| ### Error Pattern |
There was a problem hiding this comment.
The example should be on the Form component since it's not functional without a Form.
There was a problem hiding this comment.
@romhml @benjamincanac - do you think the entire thing should be moved to the Form page? or that there should be an example within the form-field.md page that shows it being used within a Form?
There was a problem hiding this comment.
Maybe it would be better in the Form page yes, we need a Form to demonstrate this anyway.
|
|
||
| ### Error Pattern | ||
|
|
||
| Nested state values will not show up by default as validation-failed messages below the form control. This is particularly relevant for components such as UInputTags and USelect. Providing a regular expression via this prop will allow those form errors to be detected and displayed. The regular expression will be matched against the `name` key's value within the `errors` list of the `FormErrorEvent`. |
There was a problem hiding this comment.
I'd rephrase it to make it more concise
| Nested state values will not show up by default as validation-failed messages below the form control. This is particularly relevant for components such as UInputTags and USelect. Providing a regular expression via this prop will allow those form errors to be detected and displayed. The regular expression will be matched against the `name` key's value within the `errors` list of the `FormErrorEvent`. | |
| Use the `error-pattern` prop on the [FormField](/docs/components/form-field) component to match nested form errors. This is especially relevant for components with array values such as [InputTags](/docs/components/input-tags). |
Added section on error pattern for form controls, detailing how to display validation errors for nested state values using a regular expression.
🔗 Linked issue
Resolves #4573
❓ Type of change
📚 Description
Adds clarification of how to use the
errorPatternprop to allow more complex form elements to render validation failure messages.📝 Checklist