Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
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 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.
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 } } }}
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.
- onValueChangeRegistered observers will be called whenever an onChange event triggers on the control.
- onBlurChangeRegistered 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
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!🙏
Form handling in React! No worries just leave it on React Reactive Form. was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.