Introducing Reactive Forms In React

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 template-driven-form and the other is [reactive-form](//angular.io/guide/reactive-forms).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.

• 
  

  **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.🎉

Today I’m launching [react-reactive-forms](//github.com/bietkul/react-reactive-form.git), 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 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 Form Group and Form Array apis.

• 
  

  
  

  **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 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.

A simple form using react-reactive-form.

Check out this example, a complex user registration form with synchronous, asynchronous validators, nested forms and updateOn feature.

A complex user registration form with react-reactive-forms. For more details, see the .

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!🙏