Form handling in React! No worries just leave it on React Reactive Form.

How cool is that if you’ve all the data & control access in only one object by which you can manipulate the control’s state at any time without any restrictions.

When I launched this library react-reactive-form , I got the mixed response from the community, people who worked with angular before & trying their hands in react, simply loved it but people from React background aren’t feeling much comfort.

The idea was to bridge the reactive form api’s to the react components so we can control the large & complex forms in an easy & performant way.

In the latest version of RRF, I’ve added some react api’s to create & manipulate the controls.So, now it’s become super easy for the react developers to create forms without learning much about a library.

What’s new in the latest version? 🎉

The new version of RRF consists of these cool features which makes RRF a perfect library to build forms in react.

Field Components
You can use these components to create a new control or bind an existing control.

• FieldGroup
  A react component which creates a new or can be used with an existing FormGroup control.
• FieldArray
  A react component which creates a new or can be used with an existing FormArray control.
• FieldControl
  A react component which creates a new or can be used with an existing FormControl control.

Checkout the below example to understand the basic uses of these components.

React Reactive Form: Simple form example

Form Generator

The latest version of RRF Introduces the FormGenerator api by which you can generate your form just by a field config.
This api is best suited when you have reusable input components or using some third party library like bootstrap, you just need to assign the components to your controls.

With this api, it won’t take more than two minutes to make a large form functional but the only condition is that you must have your components ready.😃

const fieldConfig = {  
  controls: {
    username: {
      render: TextInput, // A React component which renders an input
      meta: {
        label: 'Username'
      },
      options: {
        validators: Validators.required
      }
    },
    password: {
      render: TextInput,
      meta: {
        label: 'Password',
        type: 'password'
      },
      options: {
        validators: Validators.required
      }
    }
  }
}

React Reactive Form: Simple form with Form Generator

New Listeners

The newer version of RRF introduces two more listeners to provide more controls over the form.You can use these listeners to subscribe the event changes & perform some actions like update data to server or handle the state of other controls.

• onValueChange
  Registered observers will be called whenever an onChange event triggers on the control.
• onBlurChange
  Registered observers will be called whenever an onBlur event triggers on the control.

Apart from these new listeners RRF provides some more ( valueChanges, statusChanges etc) listeners which can be used to perform dynamic changes in the form state.

For example:

componentDidMount() {
     this.form.get('gender').valueChanges((value) => {
        if(value === 'FEMALE') {
          this.form.get('age').disable();
        }     
     })
}

The common use cases of these listeners are:
- Disable/Enable an input field based on the changes in other fields.
- Add/Remove a control from the control tree.
- Set/Remove validators

Related Links:

To know why this library is better than other solutions, check the below article.
Introducing React Reactive Forms

bietkul/react-reactive-form

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