RxJs forms in React - Part 2
In Part 1 of this post I was experimenting with a simple React form component that would allow a form to be declared using standard form elements, and which would return an rxjs observable with which to access changes in the form inputs.
After playing around with this approach I came to the conclusion that the observables did not add enough value to outweigh the additional complexity. This is mostly because of the simple need I had to only validate and get back the form data on the final submit, rather than on every change in the form.
I went ahead and completed the library anyway, but just using standard React APIs. One of the main things I wanted to achieve was to automatically add the additional validation error markup, which turned out to be relatively easy with React.createElement.
To enable validation I just added a simple prop which indicates the validation type. Then form component fields, with the validation prop set, are replaced with a new element that wraps the original field and a Validation component:
The world doesn't need another React form library, so no plans to take this too much further at this stage. However, I may still tidy it up to use on some personal projects, so the final outcome of this will be available here if anyone is interested.
After playing around with this approach I came to the conclusion that the observables did not add enough value to outweigh the additional complexity. This is mostly because of the simple need I had to only validate and get back the form data on the final submit, rather than on every change in the form.
I went ahead and completed the library anyway, but just using standard React APIs. One of the main things I wanted to achieve was to automatically add the additional validation error markup, which turned out to be relatively easy with React.createElement.
To enable validation I just added a simple prop which indicates the validation type. Then form component fields, with the validation prop set, are replaced with a new element that wraps the original field and a Validation component:
The world doesn't need another React form library, so no plans to take this too much further at this stage. However, I may still tidy it up to use on some personal projects, so the final outcome of this will be available here if anyone is interested.
Comments
Post a Comment