Angular like reactive forms in react. 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 and the other is .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. template-driven-form [reactive-form](https://angular.io/guide/reactive-forms) or data-driven-form in angular are quite popular and provides a better structured way to build and control your forms. Reactive 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:- For ex. , depends on redux. So, what if I’m using another state management library or even not using any one. Dependency issues redux-forms **BoilerPlate**A lot of boilerplate code to just write a two fields login form. **UI Independent**Not fully independent from the UI. **Nested Forms**Many popular libraries do not support nested forms. **Dynamic Changes**It’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. **Listeners**Listeners for form value and status changes. **Update Options**Restricted 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 , a library which comes with 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. [react-reactive-forms](https://github.com/bietkul/react-reactive-form.git) zero dependency It solves most of the problems with the current available form libraries in react. It weighs only gzipped, the only peer dependency is react.❤️️ Zero dependency 4.6k **UI Independent**Totally independent from the UI, you just need to use the handlers to bind input elements. **Nested Forms**It supports nested forms, you can create nested controls by using and apis. Form Group Form Array **Dynamic Changes**Reactive 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. **Listeners**It provides value and status changes listeners for each control. **Update Options**There is a property called by using it you can define the update strategy of a control. updateOn How to use it? So, the people from angular background will feel right at home, because all api’s naming conventions are same. A simple form using react-reactive-form. Check out this example, a complex user registration form with synchronous, asynchronous validators, nested forms and feature. updateOn A complex user registration form with react-reactive-forms. For more details, see the . docs Roadmap It’s just the beginning, more is coming. Some upcoming features are: Value normalizers More options for eg. updateOn 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!🙏 _react-reactive-form - Angular like reactive forms in React._github.com bietkul/react-reactive-form

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Introducing Reactive Forms In React

Too Long; Didn't Read

Company Mentioned

Kuldeep Saxena

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Introducing Reactive Forms In React

Too Long; Didn't Read

Company Mentioned

Kuldeep Saxena

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES