New Way To Validate the Form in VUE

TypeScript Decorator Based Validation

Pure Model-Driven Reactive Form Validation

Apr 5 ·4min read

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:.

Wait!

How to show the Error Message?

For showing the error message, you have to use the errorMessage property of respective FormControl like in our case we want to show the error message of userName property. Here is the code of showing the error message:

You don’t have to put multiple v-if conditions in the template for showing the different validation messages. All things are already managed in the errorMessage property. Here is the output:

What’s the most powerful feature in the package?

As all features are superb and powerful :smiley:, The most which I liked a lot is the Form Directly interact with Model Object instance properties. This gives better flexibility of our code because our business logic will be separated into multiple classes instead of components.

Let me share one simple case like we have created the FormGroup and the FormControl is userName , Now there is a requirement where we want to enhance our Form with First Name and Last Name fields. Bottom of the Form we have to combine the First Name and Last Name field value and show as a Full Name.

Achieving the above case we have to define three more properties in the User model. Here is the code:

As you have seen we have used the getter/setter method for firstName and lastName property because whenever the user enters the value in the respective control textbox then setter method will be called and set the fullName . Here is the output:

What’s the power(:muscle:) of this package?

This provides a lot of features with ease of code:

Clean Code through validation decorators.
Pure Model-Driven.
Support Class Abstraction.
Strongly-Typed.
Conditional Field Validation.
Dirty Check.
Dynamic Validation.
45+ Validation Decorators.
Extensive properties of FormGroup and FromControl like ‘valid’, ‘invalid’, ‘disabled’, ‘errorMessage’, ‘errorMessages’, etc.
Runtime Validation Rule Change Conditionally.
Globally configure error message binding strategy.
Support Multilingual Error Messages.
Many More….

Here is the working example.

I hope you like this article. If you have any suggestions on this approach, please write your comment below.

For more information about dynamic forms, please refer to this link: rxweb.io

New Way To Validate the Form in VUE

TypeScript Decorator Based Validation