Universal Reactive Forms
In this Story, I will show you the universal-reactive-forms, which is a library that i made available at NPM, it allows us to build reactive forms and perform complex validations. This lib was strongly inspired by Angular’s Reactive Forms.
Motivation
As a frontend developer, I had the opportunity to participate in the development of an Angular application with a high level of complexity in forms.
In this application, which in certain parts had financial calculations, many fields interacted with each other, and it was necessary to provide a certain flexibility with the validators, because, depending on the values filled in the form, one or more fields could require none, one or more validations. Fortunately, Angular has the Reactive Forms module, which can divinely perform this job of form management and validation.
On the other hand, libraries and frameworks like Svelte and Vue don’t have good solutions for forms and validations like Angular’s Reactive Forms. This fact gave me some concern, because depending on the scope of the project, my choice of framework could be limited only to Angular due to the certainty that it would have what i need.
The Solution
With this problem in mind, i decided to develop the ‘universal-reactive-forms’, initially it would only be used with my favorite pair: the Vue framework and the Vuetify styling plugin, but then I saw that I could leave it more generalist, to perhaps be used in other libs and situations outside of Vue. this library can be used in javascript and typescript.
To install it, use the command npm install universal-reactive-forms.
The universal-reactive-forms was strongly inspired by Angular’s Reactive Forms, so many of the features and behaviors are extremely similar in both.
The universal-reactive-forms provides three types of form items, which are FormGroup, FormArray and FormControl:
All types of form items extend the AbstractControl class, so they have properties and methods in common:
Each type of form item has the reset() method, this method will reset the form item to its initial state at the time it was created, included its values and validators.
FormControl occupies a prominent role, as it is the one that has support for synchronous and asynchronous validators, besides to notifying about its changes through the valueChanges property, which is an observable:
To change the value of a FormControl, the new value can be directly assigned to the value property:
formControl.value = "My new Value";To assign a new value to a FormControl, the setValue() method can also be used, this method is especially useful when it is necessary that the value change is not notified, for that, it is only necessary to pass as a second argument a false Boolean:
formControl.setValue("new value", false);In general, when using a common input element, the returned value is always of type string, even if we have entered a number.
For this reason, FormControl accepts an options object as the last argument of its constructor method, among the available options are enabled and valueSetter. The enabled property, which is of the Boolean type, indicates whether the FormControl will start enabled or not, while the valueSetter property accepts a function that returns a value, this value can be modified as needed:
The status of form item groupers (FormGroup and FormArray) is based on its internal items (FormGroup, FormArray and FormControl). From the beginning, the Status is already calculated, but errors in FormControls are only released when the internal touched property is true.
Therefore, at the time of submission it is always a good idea, in case the form has errors, run the markAllAsTouched() method, in order to release FormControls errors in which there was no interaction or change in value:
Conclusion
With the development of this library, my main expectations with forms and validations were achieved, being:
- Work reactively with RxJs.
- Flexibility with the dynamic use of synchronous and asynchronous validators.
- Validate all or part of the form.
- Support a collection of individually validable items (FormArray).
Obviously this library has a number of features that were not completely covered by this article, but, I’ll still be focusing on improving the documentation, creating possible new features and fixing bugs that can be reported. I hope this lib can be useful for other projects and that the community can make good use of it.
Here is also a link to a project repo with Vue, TypeScript, Vuetify and universal-reactive-forms with a basic usage example:
