Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
Forms are the essential part of a web application, managing the form state especially in a library like react which doesn’t support two way data binding is not a easy task.
There are two ways to create forms in angular, one is template-driven-form and the other is reactive-form.Template forms are good but only for the smaller forms but when you have to deal with larger form reactive-forms works like a magic.
Reactive forms or data-driven-form in angular are quite popular and provides a better structured way to build and control your forms.
Now come to the react, it has many third party libraries to control the forms but they all are not much rich in features.
Problems with the current libraries
Some common problems with the current libraries are:-
- Dependency issues For ex. redux-forms, depends on redux. So, what if I’m using another state management library or even not using any one.
- BoilerPlateA lot of boilerplate code to just write a two fields login form.
- UI IndependentNot fully independent from the UI.
- Nested FormsMany popular libraries do not support nested forms.
- Dynamic ChangesIt’s hard to make form state changes dynamically.For eg. If I have to disable a field based on the value of an another field.
- ListenersListeners for form value and status changes.
- Update OptionsRestricted options to define, when a control should update it’s state i.e on change, blur and submit.
Solution
When first time I worked with the reactive forms in angular(after working on react), I was amazed.It was super easy & too impressive, then I thought that there should be something like that in react.
So, finally the wait is over.🎉
React-Reactive-Forms
Today I’m launching react-reactive-forms, a library which comes with zero dependency and is same powerful as the reactive forms of angular.It allows to create a tree of form control objects in the component class and bind them with native form control elements.
It solves most of the problems with the current available form libraries in react.
- Zero dependencyIt weighs only 4.6k gzipped, the only peer dependency is react.❤️️
- UI IndependentTotally independent from the UI, you just need to use the handlers to bind input elements.
- Nested FormsIt supports nested forms, you can create nested controls by using Form Group and Form Array apis.
- Dynamic ChangesReactive form provides value and status changes subscribers so It’s very easy to make changes dynamically.You can also add & remove controls whenever you want.
- ListenersIt provides value and status changes listeners for each control.
- Update OptionsThere is a property called updateOn by using it you can define the update strategy of a control.
How to use it?
So, the people from angular background will feel right at home, because all api’s naming conventions are same.
Check out this example, a complex user registration form with synchronous, asynchronous validators, nested forms and updateOn feature.
For more details, see the docs.
Roadmap
It’s just the beginning, more is coming. Some upcoming features are:
- Value normalizers
- More updateOn options for eg. onKeyPress
- Anything good suggested by you.
Conclusion
This library is an effort to introduce one of the best feature of angular in react and now I’m just waiting for the feedback and suggestions from the community.
Let’s make React Reactive Forms better! If you’re interested in helping, all contributions are welcome and appreciated.
Thanks for reading! Give it a try, Please do 👏 if you liked this post and don’t forget to star the repo, I will ensure more frequent updates!🙏
Repo link: https://github.com/bietkul/react-reactive-form
Introducing Reactive Forms In React was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.