New Way To Validate the Form in VUE

TypeScript Decorator Based Validation

New Way to Validate the Form in VUE

Pure Model-Driven Reactive Form Validation

Here we will discuss an elegant way to validate the form based upon the designed model.

After getting a good response from the Angular Community on decorator based reactive form validation, So I have decided to provide the same feature of Model-Driven Reactive Form Validation for VUE Community :smile: .

Introducing @rxweb/reactive-forms

If I am talking about typescript, the typescript programming language highly relies on Object-Oriented Programming practices, which makes more power to write clean code. This is the main reason to design this validation framework to provide a model object based reactive form. Because this gives you more flexibility when the complexity of application form increase and application grows at that time you don’t bog down the cumbersome activity of assembling the validators and write the same business logic multiple time.

Here is the high-level code of the model:

In the code example, we have defined the property of userName in the class of User and applied the three validation decorator which are alpha , minLength , required . Those can be automatically applied when we create the reactive form group object in the component.

Really :open_mouth:!.

Yes, You don’t need to write additional code for validation in the component or the template:grinning:.

Let’s begin the implementation in the sample project of VUE.

First, We have to install the package in the project.

npm install @rxweb/reactive-forms

After installing the package we have to configure the validation messages and set the value of client library property in the main file of the project. I am writing the below code in the main.ts file.

Let’s use the User Model in the component and create the FormGroup Object, which we will use in the template.

Here is the code of the component.

As you see the above the code where I have used IFormGroup and RxFormBuilder .

What is the use of IFormGroup?

The IFromGroup is a generic interface that provides access of the methods available in the FormGroup and that tightly binds with your model properties.

What is the use of RxFormBuilder?

This provides a FormGroup object based upon the provided model. Through this, the Form Validation rules are bind on the respective properties.

As you can see we have created the FormGroup in the constructor of the SignUp component. Now, Let’s move forward to the template part.

On the template side, You just use the v-model directive and reference the respective property of your model. Whatever properties are defined in the model those are available in the props object property of FormGroup object.

All Done :sweat_smile:.