Universal Reactive Forms

Hello guys!

I come here to publish a lib that I made available in NPM, it is the universal-reactive-forms. This lib has the objective to reactively manage and validate forms, for that, it uses resources such as Observable from RxJs. Universal-reactive-forms is compatible with JavaScript and TypeScript, and was totally inspired by Angular’s Reactive Forms.

I developed this lib because I realized the need for such a complete form solution for Vue (I developed it to be agnostic, so it is not limited to Vue :grin:) as the one existing in Angular.

It is great for working in situations where there is a need for more complex and dynamic validation, with synchronous and asynchronous validators.

I will still be focusing on improving the documentation, creating possible new features and fixing bugs that can be reported, but for now the lib is very functional.

Follow the link to the article on the medium

link at NPM

Repository with usage example

Same thing everyone does… but you did not show how the end result form looks like.

Hits? Blocks of info?

Rendering a loop of blocks of inputs just looks ugly.
Can you build a form that results in this?

http://ui-patterns.com/users/1620/collections/beautiful-forms/screenshots/5320

Forms need to be hard coded ther is no way around making a universal solution, just my opinion.

Unless you want a form that look like 1990’s HTML then go for it :slight_smile:

Hello Friend!

Maybe I’m not being clear and specific enough … but this library doesn’t aim to create visual components, but just to manage the form data allowing you to perform synchronous and asynchronous validations, it’s a very similar approach to reactive forms from Angular, so that I could choose any styling pattern (Material, Bootstrap, etc.)

Sorry i misunderstood.

There is VeeValidate and Vueladate… sorry for the spelling that does all the same stuff you are trying to do.

You can style your form as needed and add the validation as needed.

Not sure how Material / Bootstrap. or other frames work but I have auto save forms and it validates in real time simply by something as simple as

<form @submit.prevent @input="changesMade()">

and you can add a delay or whatever to that method to then send any changes to a form to the API

Once its sent to server it will validate or what not you can use changesMade to determine what you need to do async or not.

Got it. In the example repository I made a basic form using Vuetify and universal-reactive-forms (unfortunately I still haven’t been able to put it in something like sandbox :cry:).

I have already tried to work with Veevalidate and Vuelidate, but in some situations they did not seem practical to me, for example in the validation of arrays, where I might need that in a collection of 10 items only the one in position 6 was not validated, or that a specific item to perform some notification, or add or remove validators at run time. Previously I faced very complex situations in systems made in Angular that worked with finance, maybe that’s why this lib makes me feel at home :sweat_smile:.

Well either way you still need to validate server side and both of those validation options have client side to remote validation so you can make custom validation rules to abide by.

Verify user / email or even complex situation where you need server info for the front to validate.

For arrays why not simply fire it off to the API. / backend to validate live on-demand? Its going to get validated on the backend anyways a simple few kb of data to check is not going to lag the site request by any means.