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](https://github.com/bietkul/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 ComponentsYou can use these components to create a new control or bind an existing control.
- FieldGroupA react component which creates a new or can be used with an existing FormGroup control.
- FieldArrayA react component which creates a new or can be used with an existing FormArray control.
- FieldControlA 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](https://github.com/bietkul/react-reactive-form/blob/master/docs/api/FormGenerator.md) 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 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
onChangeevent triggers on the control. -
**onBlurChange**Registered observers will be called whenever an
onBlurevent 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_react-reactive-form - Angular like reactive forms in React._github.com
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!🙏