I went and built another thing. ![:wink: :wink:](https://emoji.discourse-cdn.com/twitter/wink.png?v=5)
Long story short: Iâve tried out a few different form packages for React, and none of them stuck. All I had were a few requirements:
- Donât make me spend an hour reading just to learn how to use it
- I shouldnât have to keep a reference guide handy, either
- Donât take over any UI aspects of my app, just let me easily validate fields and once the form is valid, give me all the form fields in a JavaScript object
- It should work with any UI framework: Bootstrap, Material UI, a custom solution, or just plain old HTML
- Make error reporting easy too, and make it âdisconnected,â in that the errors can appear anywhere on my page and arenât tied to the form input if I donât want them to
- Be super simpleâI get easily annoyed at over-engineered packages that ought to be simple
And so I built Formous, which meets all these requirements. Itâs just a higher-order component. No Redux here (which IMO is overkill). You know thereâs a bad trend occurring when the creator of Redux keeps having to advise people to really think about the architecture of their app before deciding to use Redux! ![:smiley: :smiley:](https://emoji.discourse-cdn.com/twitter/smiley.png?v=5)
I didnât have time to work on detailed docs yet, but I will. I did include an example which should cover everything youâd ever want to know. Itâs a first release, and very beta, but itâs a decent start.
10 Likes
Just updated to 0.7.1. Controlled inputs are now properly implemented, and default field values are possible!
Donât even knew about such construction:
const { fields: { age, name }, formSubmit, } = this.props;
![:slight_smile: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=5)
1 Like
I found four key places in your sample code to get Formous work: https://gist.github.com/strobox/146e8839dc25c623db1d6afe80197cd7
handleSubmit(formStatus, fields) { // 4 -> handle Formouse arguments passed to handler ... formSubmit, // 2 -> Export Formous validation function to current scope ... <form onSubmit={formSubmit(this.handleSubmit)}> // 3 -> wrap form event handler with Formous vailidation function ... export default Formous(fields)(MyComponent) // 1 -> wrap target component ....
Is I right? And what about css class names assignment to failed/empty/correct fields? Optional: live validation (on user input not submit)
@strobox Iâm not really sure what youâre asking. It looks like youâre tracing the steps that Formous goes through⌠in which case, yes, youâve got it right. ![:slight_smile: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=5)
As for the CSS class names, you can set failProps
to whatever you want. For example:
// This syntax will change slightly in 0.8.0 BTW
const fields = {
name: {
tests: [
{
critical: true,
failProps: {
className: 'error-visible critical-error',
},
test(value) {
return value !== '';
},
},
],
},
};
And then youâd just apply the props to whatever you like:
<input value={name.value} { ...name.events } />
<div { ...name.failProps }>This is an error.</div>
Ok, I understand, thanks!