-
Notifications
You must be signed in to change notification settings - Fork 58
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Expose context key and FormState so we can create our own components #149
Comments
I blogged a bit on this topic, it may be helpful. I created my own form element components which access the parent's context, in order render $errors UX as well. I used a plain Because i used flat $form element names like 'itemlist[1].description', i had to translate to the actual $errors.itemlist[1].description internally. |
Problem to solve
Bootstrap's validation CSS allows for marking the input fields themselves invalid via class
is-invalid
. Doing so also triggers displaying a followingclass="invalid-feedback"
message.To implement this, my custom input component needs access to $errors, in order to determine whether an error has been associated with the input element. I see two ways to make $errors available:
let:errors
, and include{errors}
among the properties I pass to each input element.setContext
to make it internally available to my custom input elements.The first of these makes for extra boilerplate code on every form and input. The second of these ditches the helper components altogether to re-implement the context they already (internally) implement. Neither of these solutions is ideal.
Intended users
People who want to leverage Bootstrap's validation CSS with svelte-forms-lib.
User experience goal
Make it easy to create components that use Bootstrap validation CSS without boilerplate.
Proposal
Under the ideal solution, my custom component would access svelte-form-lib's existing context key. I would also want to properly label its type (in TypeScript). This entails:
lib/components/key.js
at the package level.Also, as mentioned in #148, to make this type work, occurrences of
Record<string, any>
will need to change to{[key: string]: any}
in the TypeScript declaration.The text was updated successfully, but these errors were encountered: