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 , 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. [react-reactive-form](https://github.com/bietkul/react-reactive-form) 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 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. api’s What’s new in the latest version? 🎉 The new version of consists of these cool features which makes RRF a perfect library to build forms in react. RRF You can use these components to create a new control or bind an existing control. Field Components A react component which creates a new or can be used with an existing control. FieldGroup FormGroup A react component which creates a new or can be used with an existing control. FieldArray FormArray A react component which creates a new or can be used with an existing control. FieldControl FormControl 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 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. [FormGenerator](https://github.com/bietkul/react-reactive-form/blob/master/docs/api/FormGenerator.md) 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 inputmeta: {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 event triggers on the control. onChange **onBlurChange**Registered observers will be called whenever an event triggers on the control. onBlur 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 _react-reactive-form - Angular like reactive forms in React._github.com 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!🙏

Super

Too Long; Didn't Read

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

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

Too Long; Didn't Read

Companies Mentioned

Kuldeep Saxena

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

Kuldeep Saxena

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES